我遇到了一个独特的事件,当用户从下拉列表中进行选择时,如果您在 Canvas 上扫描,图表会发生变化,那么之前的图表会像幽灵一样出现在背景中。我知道你可以使用 graph.destroy() 之类的东西,但我不确定这是否合适以及将它放在哪里。
更新图表的代码
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 200;
function updateChart() {
// ctx.canvas.destroy();
var determineChart = $("#chartType").val();
var params = dataMapMain[determineChart];
if ([params.method] == "Pie") {
document.getElementById("subOption").hidden = false;
document.getElementById("arrowId").hidden = false;
var determineChart = $("#subOption").val();
var params = dataMapSub[determineChart];
$('#subOption').on('change', updateChart);
new Chart(ctx)[params.method](params.data, options, {});
}
else {
document.getElementById("subOption").hidden = true;
document.getElementById("arrowId").hidden = true;
new Chart(ctx)[params.method](params.data, options, {});
}
}
$('#chartType').on('change', updateChart)
updateChart();
这fiddle演示问题,将鼠标悬停在图表上以查看“ghost”。
最佳答案
因为您没有销毁不再使用的 Chart
实例,chartjs 正在将多个图表绘制到同一个 Canvas 上下文中。
您需要引用您新建
的Chart
实例,以便能够在您 之前对它们调用
另一个。destroy
新的
将此添加到您的代码中:
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 200;
var chart; // assign your chart reference to this variable
function updateChart() {
var determineChart = $("#chartType").val();
var params = dataMapMain[determineChart];
if ([params.method] == "Pie") {
document.getElementById("subOption").hidden = false;
document.getElementById("arrowId").hidden = false;
var determineChart = $("#subOption").val();
var params = dataMapSub[determineChart];
$('#subOption').on('change', updateChart);
chart && chart.destroy(); // destroy previous chart
chart = new Chart(ctx)[params.method](params.data, options, {});
}
else {
document.getElementById("subOption").hidden = true;
document.getElementById("arrowId").hidden = true;
chart && chart.destroy(); // destroy previous chart
chart = new Chart(ctx)[params.method](params.data, options, {});
}
}
$('#chartType').on('change', updateChart)
updateChart();
这是一个 fiddle这证明了修复。
关于javascript - ChartJs Canvas 在更改图形类型时显示以前的图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33280757/