Uncaught TypeError: Cannot read properties of null (reading 'getContext')
时间: 2023-08-25 16:11:27 浏览: 208
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决
5星 · 资源好评率100%
这个错误通常是由于在尝试获取canvas的上下文之前,canvas元素还没有被正确加载导致的。您可以确保在执行JavaScript代码之前,页面已经加载完毕。
您可以将JavaScript代码放置在`window.onload`事件处理程序中,以确保在页面完全加载后再执行代码。例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
window.onload = function () {
// 创建饼图数据
var data = {
labels: ['Part 1', 'Part 2', 'Part 3', 'Part 4'],
datasets: [{
data: [15, 30, 45, 10],
backgroundColor: ['green', 'green', 'green', 'green'] // 默认绿色
}]
};
// 计算百分比
var total = data.datasets[0].data.reduce((a, b) => a + b, 0);
var percentages = data.datasets[0].data.map(value => ((value / total) * 100).toFixed(2) + '%');
// 判断是否需要添加红色样式
var colors = data.datasets[0].backgroundColor;
for (var i = 0; i < colors.length; i++) {
if (data.datasets[0].data[i] > 0) {
colors[i] = 'red';
}
}
// 配置饼图
var options = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data.labels[tooltipItem.index] + ': ' + data.datasets[0].data[tooltipItem.index] + ' (' + percentages[tooltipItem.index] + ')';
}
}
}
};
// 绘制饼图
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: data,
options: options
});
}
</script>
</body>
</html>
```
通过将代码放在`window.onload`事件处理程序中,确保在页面加载完成后再执行JavaScript代码,这样就可以避免`getContext`错误。
阅读全文