Chartjs: старые данные отображаются

Question

У меня в настоящее время проблема, которая, как представляется, уже хорошо известна, но ответа на этот вопрос пока никто не работал.

Всякий раз, когда я зависания над линией в рёберный граф, график изменяется обратно на диаграмме отображается перед тем, как показано на рисунке GIF:

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

Решение, которое, казалось, самое лучшее для меня так далеко разрушает диаграмму, прежде чем создавать новую, если это не первый набор данных. (BOOL «первый» и график «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)

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Спасибо заранее!

[EDIT]

Благодаря Гусу 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 секунд, если это разве достаточно