chart.js 没有全局变量的 v2 更新图表

Question

我正在使用 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();
    }

但它不能正常工作：当用户按下 "update" 按钮并将鼠标悬停在图表上时，会突然显示之前的实例。

Answer 1

由于您是在每次执行 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);
}

这里是working example on jsFiddle

chart.js 没有全局变量的 v2 更新图表

chart.js v2 update chart without global variable

html

javascript

chart.js2