3

我正在尝试使用Chartist.js框架为我的网站创建图表。但由于某种原因，我不断收到错误“未定义图表”

我不知道如何解决这个错误。请看下面的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <title>Chartist.js - Simple line chart</title>
    <script>
       // THIS IS WHERE THE ERROR OCCURS
       new Chartist.Line('.ct-chart', {
       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
       series: [
                 [2, 3, 2, 4, 5],
                 [0, 2.5, 3, 2, 3],
                 [1, 2, 2.5, 3.5, 4]
               ]
        }, {
          width: 500,
          height: 300
       });

     </script>
     </head>

     <body>
     <div class="ct-chart"></div>

     </body>
     </html>

有谁知道我做错了什么？提前致谢。

4

1 回答 1

7

将脚本移动到页脚：

<!DOCTYPE html>
<html>
<head>

    <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <title>Chartist.js - Simple line chart</title>

     </head>

     <body>
     <div class="ct-chart"></div>
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script>
       // THIS IS WHERE THE ERROR OCCURS
       new Chartist.Line('.ct-chart', {
       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
       series: [
                 [2, 3, 2, 4, 5],
                 [0, 2.5, 3, 2, 3],
                 [1, 2, 2.5, 3.5, 4]
               ]
        }, {
          width: 500,
          height: 300
       });

     </script>
     </body>

     </html>

http://plnkr.co/edit/3sAdiBJaaue3x9kgBRZw?p=preview

它就像一个魅力:)

于 2015-05-26T10:35:52.600 回答