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）网页不显示图表，控制台没有错误

1 个答案: