我有一个带有一个大画布的页面,并且在一侧有一个菜单,该菜单由代表不同图表的多个div填充。每当我从菜单中单击一个div时,画布上的图表应会更改。
将同一画布分配给不同的图表会使每当鼠标四处移动时,画布就会变得异常。
我尝试运行chart.update()并在单击菜单中的图表时清除画布,但是问题仍然存在。
我有一个带有一个大画布的页面,并且在一侧有一个菜单,该菜单由代表不同图表的多个div填充。每当我从菜单中单击一个div时,画布上的图表应会更改。
将同一画布分配给不同的图表会使每当鼠标四处移动时,画布就会变得异常。
我尝试运行chart.update()并在单击菜单中的图表时清除画布,但是问题仍然存在。
更改图表类型的根本区别在于,您需要完全destroy()
现有图表,然后实例化一个新实例。否则,实例化时选择的Chart.js的默认设置将无效,这将引起一些奇怪的行为。
以下代码段演示了一种方法:
let chart;
function mychart(type) {
if (chart) {
chart.destroy();
}
chart = new Chart(document.getElementById("chart"),{
type: type,data: {
labels: ["a","b","c","d"],datasets: [{
label: "Series1",data: [0,1,2,4]
}]
}
})
}
document.getElementById("line").addEventListener("click",function() {
mychart("line");
});
document.getElementById("bar").addEventListener("click",function() {
mychart("bar");
});
document.getElementById("doughnut").addEventListener("click",function() {
mychart("doughnut");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<p>
<button id="line">Line</button>
<button id="bar">Bar</button>
<button id="doughnut">Doughnut</button>
</p>
<canvas id="chart"></canvas>