图表没有显示

时间:2017-06-17 20:35:23

标签: javascript html css chart.js

我正在尝试使用charts.js创建一个简单的折线图。当我运行下面的代码时,不会出现图表。我究竟做错了什么?我正在关注本教程http://www.chartjs.org/docs/latest/getting-started/

{{1}}

1 个答案:

答案 0 :(得分:3)

您使用的是版本0.2.0。如果您使用演示版(2.4.0)或最新版本(2.6.0)中的版本,则可以正常工作。 CDN链接为https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js

<html>

<head>
  <meta charset="utf-8" />
  <title>Chart.js demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>

  <h1>Chart.js Sample</h1>

  <canvas id="myChart" width="600" height="400"></canvas>
  <script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: "line",
    
      // The data for our dataset
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
          {
            label: "My First dataset",
            backgroundColor: "rgb(255, 99, 132)",
            borderColor: "rgb(255, 99, 132)",
            data: [0, 10, 5, 2, 20, 30, 45]
          }
        ]
      },
    
      // Configuration options go here
      options: {
        responsive:false,
        maintainAspectRatio: false
      }
    });
  </script>
</body>
</html>