Javascript Chartjs：正在显示的旧数据

我目前有一个问题，这似乎是众所周知的，但没有一个答案提供给我迄今为止工作

每当我将鼠标悬停在线条图中的线条上时，图表将变回之前显示的图表，如下面的GIF所示：

到目前为止，我认为最好的解决方案是，如果不是第一组数据，在创建新图表之前销毁图表。（布尔“first”和图表“pauzeAmountChart”是全局变量）

但是，当它不是第一个数据集，因此到达行“pauzeAmountChart.destroy（）”，这意味着该图表之前已经初始化并填充了数据时，我得到以下错误：

不幸的是，我不确定这个错误意味着什么，谷歌也没有进一步帮助我

此外，当我在数据之间不断切换时，错误再次出现，与上次出现错误相比，增加了+1次。这意味着它实际上并没有破坏图形？（因此，尝试#x显示数据给出x个错误）

如果你需要更多的信息，请告诉我

提前谢谢你

[编辑]

多亏了Guus Punt，它修好了！经过一些调整，它现在可以工作了。请参阅下面的解决方案：

function setupPauzeAmountGraph(currVideo, currData) {
        var ctx = document.getElementById("aantalPauzesChart");

        ...

        if (pauzeAmountChart != undefined) {
            pauzeAmountChart.chart.config.data.labels = labels;
            pauzeAmountChart.chart.config.data.datasets[0].data = data;

            pauzeAmountChart.update();
        } else {
            pauzeAmountChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Aantal pauzes / seconde',
                        data: data,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [
                            {ticks: {min: 0, stepSize: step}}],
                        xAxes: [
                            {scaleLabel: {display: true, labelString: 'Seconden in video'}}]
                    },
                    elements: {point: {radius: 0}}
                }
            });
        }
    }

---

我需要运行您的示例来确定，但以下内容可能会有所帮助

您可以添加和删除数据集，而不是销毁图表

• 在添加新数据之前删除数据集

  data.labels = []; //Empty label array
  data.datasets.splice(0, 1);//Removes first dataset
  

• 添加新的数据集和标签

• 更新图表

  pauzeAmountChart.update();
  

---

我有一个工作示例，它从webapi检索新数据并每10秒更新一次，如果这还不够的话

非常感谢大家！只需几次编辑，效果就像一个魔咒！很乐意帮忙。刚开始的时候，我自己挣扎了几个小时，最后创建了自己的chartjs对象。

pauzeAmountChart.update();