Chartjs Donut Chart倒计时动画流畅

Question

I am using doughnut chart from Chart.js to show 60 seconds timer chart.

Gif: https://imgur.com/UmhqzuO

options = {
    tooltips: {enabled: false},
    cutoutPercentage: 75,
    animation: {duration: 1}
};

data = {
    datasets: [
        {
            data: [this.percentage, 100 - this.percentage],
            backgroundColor: [this.color, this.fillColor]
        },
    ]
};

On every second, I am updating the chart to reflect seconds. The timer start from 60 seconds and goes to 0. The current animation feels like ticking. I want the animation to look smooth as a sweeping clock instead of ticking.

How can I achieve sweep animation? Since the chart is redrawn after each second, how can I maintain the last position and update from that position?

Answer 1

I achieved this using

        const data = this.getDataSet();
        this.doughnut.chart.data.datasets[0].backgroundColor = data.backgroundColor;
        this.doughnut.chart.data.datasets[0].data = data.data;
        this.doughnut.chart.update();