代码之家 › 专栏 › 技术社区 › Jimmy

画布不是为简单图表定义的

chart.js javascript

-4

Jimmy · 技术社区 · 6 年前

<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

我试过在脚本上下移动画布,但没有什么不同。我做错什么了?

3 回复 | 直到 6 年前

1

Omar 6 年前

你还需要把画布弄得像 var canvas = document.getElementById('myChart')

2

1

Shai Aharoni 6 年前

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

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

3

1

epascarello 6 年前

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<!-- Need to put canvas before the script -->
<div id="parent">
  <canvas id="myChart"></canvas>
</div>
<script>
var canvas = document.getElementById("myChart");  // <-- need to define canvas
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>