(Chart.js)网页未显示图表，控制台中没有错误

我是Chart.js上的新手，并尝试构建简单的东西。我在控制台中没有错误，但图表没有在我的网页上显示。我不知道它来自哪里。

如果有人可以提供帮助，那真的很棒。

<!DOCTYPE>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
</head>
<body>
    <div id="center"><canvas id="canvas" width="600" height="400"></canvas></div>
  <script>

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var datas = {
        labels: ["2010", "2011", "2012", "2013"],
        datasets: [
            {
                type: "line",
                data : [150,200,250,150],
                color:"#878BB6",
            },
            {
                type: "line",
                data : [250,100,150,10],
                color : "#4ACAB4",
            }
        ]
    }
  </script>
</body>
</html>

您无法正确构建图表。这是应该创建的方式...

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["2010", "2011", "2012", "2013"],
      datasets: [{
         label: 'Dataset 1',
         data: [150, 200, 250, 150],
         color: "#878BB6",
      }, {
         label: 'Dataset 2',
         data: [250, 100, 150, 10],
         color: "#4ACAB4",
      }]
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="center">
   <canvas id="canvas" width="600" height="400"></canvas>
</div>

要了解有关ChartJ的更多信息，请参阅官方文档。

相关内容

最新更新

热门标签：