我遇到了一个我似乎无法修复的错误。
当我的鼠标悬停在画布上时，我试图显示图表（Chart.js）。将鼠标悬停在画布上时，出现TypeError: t is null错误。
错误：{“ message”：“脚本错误。”，“ filename”：“ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js”，“ lineno”：0，“ colno”：0}
错误不是来自我自己的代码，而是来自chart.js。
我使用的代码可以在下面找到。
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<style>
#canvas{border:1px solid lightgray;}
</style>
</head>
<body>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//Mouse over
canvas.addEventListener("mouseover",function(){
draw(ctx);
console.log("mosue hover")
//Show chart
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
//x
labels: [1571677338438,
1571680924962,
1571684668435],
datasets: [{
data: [8179.6471707218025,
8194.415903357343,
8175.8698340503815],
borderColor: "#3e95cd",
fill: true
}
]
},
options: {
title: {
display: false,
text: 'World population per region (in millions)'
},
legend: {
display: false,
}
}
});
});
//Mouse over ends
canvas.addEventListener("mouseout",function(){
draw(ctx);
console.log("end hover");
console.log("remove chart.");
});
draw(ctx);
function draw(ctx){
ctx.beginPath();
ctx.closePath();
}
}; // end window.onload
</script>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>[当我将其更改为line-chart时，您正在选择令人兴奋的元素canvas，显示的图表应为：
//Show chart
new Chart(document.getElementById("canvas"), {
type: 'line',
data: {
.
.