Chartjs：正在显示的旧数据

Question

我目前遇到了一个似乎已经众所周知的问题，但提供的答案到目前为止都没有对我有用。

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

https://i.stack.imgur.com/cmknf.gif

到目前为止，对我来说最好的解决方案是在创建新图表之前破坏图表，如果它不是第一组数据的话。 （bool 'first' 和 chart 'pauzeAmountChart' 是全局变量）

function setupAvgPauseGraph(currVideo, currData) {
        if (!first) {
            pauzeAmountChart.destroy();
        }

        first = false;

        var ctx = document.getElementById("pauzeduurChart");

        ...

        avgPauseChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Gemiddelde pauzeduur / 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}}
            }
        });

    }

但是，当它不是第一个数据集时，因此到达 'pauzeAmountChart.destroy()' 行并且这意味着图表之前已经初始化并填充了数据，我收到此错误：

http://prntscr.com/e57x4a

很遗憾，我不确定这个错误是什么意思，Google 也没有进一步帮助我。

此外，当我不断在数据之间切换时，错误再次出现 + 与上一次出现错误相比多 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}}
                }
            });
        }
    }

Answer 1

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

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

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

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

• 添加新数据集和标签

• 更新图表

  pauzeAmountChart.update();
  

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