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

Question

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

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()结束当前动画循环，
然后清除数据，并在没有动画的情况下更新图表。

请参阅以下工作片段，
一旦动画进度达到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>