我有一个使用chart.js创建的折线图。在页面加载时一切正常,但是当切换图表并将鼠标悬停在图表的角落时,它将显示旧图表。
这也是您可以查看其行为的实时Web应用程序。 https://www.batchrank.com/
我试图用update()进行修复,销毁并清除它们中没有一个起作用的东西。
非常感谢您的帮助,
这是我的代码;
var ctx = document.getElementById("chartContainer").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
label: "data",
datasets: [
{
label: "Mobile Speed Scores",
data: mobileData,
backgroundColor: ["rgba(255, 99, 132, 0.2)"],
borderColor: ["rgba(255, 99, 132, 1)"],
borderWidth: 1
},
{
label: "Desktop Speed Scores",
data: desktopData,
backgroundColor: ["rgba(49, 67, 129, 0.2)"],
borderColor: ["rgba(49, 67, 129, 1)"],
borderWidth: 1
}
]
},
options: {
responsive: true,
title: {
display: true,
text: inspectUrl
},
scales: {
xAxes: [
{
type: "time",
display: true,
scaleLabel: {
display: true,
labelString: "Date"
}
}
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: "value"
}
}
]
}
}
});
myChart.render();
const removeElements = elms => elms.forEach(el => el.remove());
removeElements(document.querySelectorAll(".progress"));
function toogleDataSeries(e) {
e.dataSeries.visible = !(
typeof e.dataSeries.visible === "undefined" || e.dataSeries.visible
);
myChart.destroy();
myChart.render();
}
}