javascript - 没有为简单图表定义画布

Question

我正在尝试在我的网站上放置一个简单的图表。我有这个代码：

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script>
var ctx = canvas.getContext("2d");
var parent = document.getElementById('parent');
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

var chart = new Chart(ctx, {
  type: 'line',
  options: {
      legend: {
      display: false
    },
    responsive: true,
    maintainAspectRatio: false
  },
  data: {
    labels: [3,4],
    datasets: [{
        label: 'Test 01',
        data: [1,2],
      }
    ]
  }
});
</script>
<div id="parent">
  <canvas id="myChart"></canvas>
</div>

但是它返回给我错误：

Uncaught ReferenceError: canvas is not defined
    at mytest3.html:47

我尝试在脚本上方和下方移动画布，但没有任何区别。我在这里做错了什么？

标签： javascriptchart.js

Answer 1

您需要在使用前设置 canvas 变量。添加以下内容：

<script>
//Add the following line
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");