Question

出于某种原因，我不知道。我的Chart.js代码没有按照文档说的那样工作..

这是代码：

<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script></head>

<body>
<div class="container">
  <h2>Chart.js — Line Chart Demo</h2>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

</body>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.6)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.6)"
    }]
  }
});
  </script>
</html>

我是Chart.js的新手，请帮助我！

Answer 1

包括bundle.min.js <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> 使用代码https://jsfiddle.net/sv4snt39/1/

的示例

Answer 2

如果您使用的是Chart.js v1或v2，则语法不同。

您使用<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>导入了v1库。

但实际上你使用的是v2语法：

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        // ...
    }
});

要解决此问题，您可以：

将语法更改为v1＆＃39;：

var myChart= new Chart(ctx).Line({
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
            // ...
        }]
    });

（我建议使用此选项）使用以下命令将导入的库更改为最新库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>

Chart.js示例代码不起作用

2 个答案: