用 Charts.js 禁用动画

小开

var pieData = [{
value: 30,
color: "#F38630"
},
{
value: 50,
color: "#E0E4CC"
},
{
value: 100,
color: "#69D2E7"
}];


var pieOptions = {
animation: false
};


var ctx = document.getElementById("canvas").getContext("2d");
var myPie = new Chart(ctx).Pie(pieData, pieOptions);

That should work ;)

小开

To prevent reading all of the accepted answer that answers that particular example, to disable animation in chart js:

Pass an object in your options when initialising the particular chart type and use the following key/value pair: animation: false. e.g. myChart.Bar(myCanvas, {animation:false});

小开

options: {
animation: {
duration: 0
}
}

小开

This should do the trick:

    chartOption = {
animation:{
duration: 0
}
}

小开

options{
animation: false
}

小开

Hi following 3 options works for the disabling the animation

1)Disable animation:

var myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
animation: false,
}
});

2)Reduce animation duration for 0

var myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
animation: {
duration: 0,
},
});

3)Global Option:

 Chart.defaults.global.animation = false;
var myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
}
});

小开

Try this:

options: {
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
}

小开

This can also be done globally:

Chart.defaults.global.animation.duration = 0

Via: https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration

小开

According to the docs (https://www.chartjs.org/docs/latest/general/performance.html#disable-animations) here is the way to completely disable animations:

new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
duration: 0 // general animation time
},
hover: {
animationDuration: 0 // duration of animations when hovering an item
},
responsiveAnimationDuration: 0 // animation duration after a resize
}
});

小开

For those who can't disable animations when they use:

const chartOptions = {
animation: {
duration: 0,
},
};

Give the Chart a fixed height. If the parent element is responsive it may cause the chart to re-render and make it seem as if animations are not disabled.