Javascript 在这个Chart.js代码示例中，如何销毁/更新图表数据？

新年快乐！ 我正在考虑是否需要销毁或更新图表数据，以便在重新加载图表时，不会在鼠标悬停时显示以前的数据

我已经看过上面的示例，并且查看了很多示例，但是没有一个与我的代码是由其他开发人员编写的相匹配。有人能告诉我如何使用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, ",");
                        }
                    }
                }]
            }
        }
    });
};

---

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

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

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

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

如果要使用画布id销毁特定图表，请使用以下代码：

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

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

---

您可以直接修改图表使用的数据

从那以后，你就可以得到文件了

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

在这里，您可以通过引用将新数据传递给图表对象。您可以在创建

新图表（…）

时保存引用

---

这有助于以平滑的方式更快地呈现图表。

您需要将图表保存到变量中。因此，在调用

new Chart

的地方，将其设置为类似

var myChart=new Chart

的值。您可以阅读有关类构造函数的内容（图表是类，构造函数是调用

new

时发生的事情）。之后，您将能够对变量执行操作（如

myChart.destroy

）。谢谢。我是在现有showChart行之前设置变量，还是需要在showChart函数中设置？它需要在初始化图表的任何位置设置，因此在这种情况下，它将位于

showChart

函数--

showChart=function（）{var myChart=new chart…}

中。希望能有帮助。谢谢。我已经设置了var myChart。在哪里实现myChart.destroy（）最好？如果不看更多的代码（CodePen或JSFiddle会更好），我无法确切地确定这一点，但您可能希望在函数之外设置变量，然后根据需要清除：

var myChart=null；showChart=function（…）{if（myChart！==null）{myChart.destroy（）；}myChart=…}

此外，此方法避免了在创建时将图表存储在变量中的开销。这是一个不错的解决方案，但有其他方法可以更新图表。是的，我们可以使用同一个助手类来更新特定的图表或所有图表，非常方便。