[英]chart.js v2 update chart without global variable
我正在使用chart.js v2.5.0。
我想动态创建图表而不使用全局变量。
例如,我想使用类似于以下的代码: https : //jsfiddle.net/DUKEiLL/sf57xw6b/
function UpdateChart(ctrl) {
var config = $("#" + ctrl).data("ChartJs");
config.data.datasets.forEach(function (dataset) {
dataset.data = dataset.data.map(function () {
return randomScalingFactor();
});
});
var ctx = document.getElementById(ctrl).getContext("2d");
var TempMyDoughnut = new Chart(ctx, config);
TempMyDoughnut.update();
}
但是它不能正常工作:当用户按下“更新”按钮并将鼠标悬停在图表上时,会突然显示以前的实例。
由于您将在每次执行UpdateChart
函数时创建一个新图表,因此,您必须销毁图表的任何先前实例,以防止发生悬停问题。
为此,您可以简单地用以下代码替换UpdateChart
函数:
function UpdateChart(ctrl) {
var config = $("#" + ctrl).data("ChartJs");
config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
// destroy previous instance of chart
var meta = config.data.datasets[0]._meta;
for (let i in meta) {
if (meta[i].controller) meta[i].controller.chart.destroy();
}
var ctx = document.getElementById(ctrl).getContext("2d");
var TempMyDoughnut = new Chart(ctx, config);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.