javascript - 如何销毁/更新此 Chart.js 代码示例中的图表数据？

Question

新年快乐!我正在努力解决销毁或更新图表数据的需要，以便在重新加载图表时，鼠标悬停时不会显示先前数据的存在。

我在 Chart.js's API page 上看过这个例子，并查看了许多关于 SO 的示例，但似乎没有一个与其他开发人员编写的代码相匹配。有人可以告诉我如何使用 myLineChart.destroy();或 myLineChart.update();可以申请吗？

代码:

// Display the chart
showChart = function (data, chartPosition) {
    console.log(chartPosition)
    new Chart(document.getElementById("line-chart-" + chartPosition), {
        type: 'line',    
        data: data,
        options: {
            legend: {
                position: 'bottom',
                fillStyle: Color,
                strokeStyle: Color,
                labels: {
                usePointStyle: true,
                fontSize: 12,
                boxWidth: 10,
            }
            },
            title: {
                display: true,
                text: 'Main Title'
            },
            tooltips: {
                callbacks: {
                title: function(tooltipItems, data) {
           return data.datasets[tooltipItems[0].datasetIndex].label;
                    },
                label: function(tooltipItem, data) {
            return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
            });
            }
    }
},
            scales: {
  xAxes: [{
  ticks: {
         callback: function(value, index, values) {
         return value + ' years';
                }
                }
  }],
                yAxes: [{
                    ticks: {
                        callback: function (value, index, values) {
                            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        }
                    }
                }]
            }
        }
    });
};

Answer 1

Chart.js 提供了一个帮助程序类，您可以从中访问页面上的所有图表实例。

如果您想在更新/重新加载之前销毁所有实例，请使用以下代码:

Chart.helpers.each(Chart.instances, function (instance) {
         instance.destroy();
    });

如果您想使用 Canvas ID 销毁特定图表，请使用以下代码:

Chart.helpers.each(Chart.instances, function (instance) {
        if (instance.chart.canvas.id === "yourChartId") {
            instance.destroy();
            return;
        }
    });