Chart.js重绘正在进行渲染的图表

问题描述

我正在使用chart.js 3.x JavaScript库来显示图表。
我需要更新正在进行渲染的图表 。
我正在使用JavaScript Worker更新图表数据。

for (var index=0;index < myjson.length;index++) {           
    chart.data.datasets[index].data.push(myjson[index]);
}
chart.update();

我正在执行以下类似操作以清理图表数据集。

// Set the empty data and render the chart to clear the data 
for (var index=0;index < chart.data.datasets.length;index++) {           
    chart.data.datasets[index].data = [];
}
chart.update();

但是我看到图表中仍然有一些线没有正确清除。
可能是连续绘制导致了此问题。
我还尝试过clear()和reset()图表，但没有效果。
那么如何正确清除图表数据并重新绘制新数据集。

解决方法

使用stop()结束当前动画循环，
然后清除数据，并在不使用动画的情况下更新图表。

请参阅以下工作片段，
动画进度达到50％后，
停止动画，清除数据，并更新图表而不显示动画...

$(document).ready(function() {
  var offset = [100,100,100];
  var data = [7900,5400,4300,4300];
  var ctx = document.getElementById('bar-chart');
  var data = {
    labels: ['June 9','June 11','June 13','June 15'],datasets: [{
      data: offset,backgroundColor: 'transparent'
    },{
      data: data.map(function (value,index) {
        return value - offset[index];
      }),backgroundColor: 'orange'
    }]
  }
  var chart = new Chart(ctx,{
    type: 'bar',data: data,options: {
      animation: {
        onProgress: function(animation) {
          var progress = animation.currentStep / animation.numSteps;

          // determine if progress is above 50%
          if (progress >= 0.5) {

            // stop current animation loop
            animation.chart.stop();

            // remove labels and data
            for (var i = chart.data.labels.length - 1; i >= 0; i--) {
              animation.chart.data.labels.pop();
            }
            for (var i = chart.data.datasets.length - 1; i >= 0; i--) {
              animation.chart.data.datasets.pop();
            }

            // update without animation
            animation.chart.update(0);
          }
        }
      },legend: {
        display: false
      },tooltips: {
        enabled: false
      },scales: {
        yAxes: [{
          stacked: true
        }]
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="bar-chart"></canvas>