Question

我知道我在这里丢失了一些愚蠢的东西。知道为什么我无法呈现我的图表吗？

TypeError：控制台中的a为空错误消息。

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

Answer 1

<强> live example

你应该在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>

Chartist.js抛出一个TypeError：a为null

1 个答案: