Question

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

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

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

到目前为止，对我来说似乎最好的解决方案是在创建新图表之前销毁图表，如果它不是第一组数据的话。（bool＆＃39; first＆＃39; and chart＆＃39; pauzeAmountChart＆＃39;是全局变量）

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（）＆＃39; AND表示图表已经初始化并且之前填充了数据，我收到此错误：

http://prntscr.com/e57x4a

我很遗憾不确定这个错误意味着什么，Google也没有给我任何帮助。

此外，当我在数据之间切换时，错误再次出现+上一次错误出现的时间。这意味着它实际上并没有破坏图表？（因此，尝试#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秒更新一次，如果这还不够

Chartjs：显示旧数据

1 个答案: