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?
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.