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 回答