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

Question

我正在使用 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() 图表但没有效果。
那么如何正确清除图表数据并重新绘制新数据集。

Answer 1

使用stop()结束当前动画循环，
然后清除数据，更新图表，不显示动画。

请参阅以下工作 sn-p，
一旦动画进度达到 50%，
动画停止，数据清空，图表更新无动画...

$(document).ready(function() {
  var offset = [100, 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>