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

Question

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

Answer 1

您没有正确构建图表。这是它应该如何创建...

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>

要了解有关 ChartJS 的更多信息，请参阅 official documentation。

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

(Chart.js) web page doesn't display chart, no error in console

charts

chart.js2