1

私はここでばかげた何かが欠けていることを知っています。チャートをレンダリングできない理由はありますか?

TypeError: a is null コンソールのエラー メッセージ。

<html>
<head>
<title>My first Chartist Tests</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

 </head>
<body><script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>


<script type="text/javascript">

new Chartist.Line('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  series: [
      [12, 9, 7, 8, 5],
       [2, 1, 3.5, 7, 3],
      [1, 3, 4, 5, 6]
      ]
}, {
 fullWidth: true,
 chartPadding: {
    right: 40
 }
});

</script>
<div class="ct-chart ct-perfect-fourth"></div>
 </body>
</html>
4

1 に答える 1

2

実際の例

dom が完全にロードされた後に js コードを実行する必要があります。スクリプトを div (本体の最後) の後に移動してみてください。

<html>
    <head>
        <title>My first Chartist Tests</title>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

    </head>
    <body>
        <div class="ct-chart ct-perfect-fourth"></div>

        <script type="text/javascript" src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

        <script type="text/javascript">

            new Chartist.Line('.ct-chart', {
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
                series: [
                    [12, 9, 7, 8, 5],
                    [2, 1, 3.5, 7, 3],
                    [1, 3, 4, 5, 6]
                ]
            }, {
                fullWidth: true,
                chartPadding: {
                    right: 40
                }
            });

        </script>
    </body>
</html>
于 2016-07-18T20:49:58.633 に答える