使用 Charts.js 禁用动画答案

【问题标题】：Disable Animation with Charts.js使用 Charts.js 禁用动画
【发布时间】：2014-02-18 19:00:47
【问题描述】：

我在使用 chart.js 关闭动画时遇到了一些问题。

这是我的代码：

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

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

谁能举个例子？

【问题讨论】：

标签： javascript charts

【解决方案1】：

根据文档 (https://www.chartjs.org/docs/latest/general/performance.html#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
    }
});

【讨论】：

【解决方案2】：

这也可以全局完成：

Chart.defaults.global.animation.duration = 0

通过：https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

您好，以下 3 个选项可用于禁用动画

1)禁用动画：

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

2)将动画持续时间缩短为 0

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

3)全局选项：

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

【讨论】：

【解决方案5】：

options{
    animation: false
}

【讨论】：

【解决方案6】：

这应该可以解决问题：

    chartOption = {
        animation:{
            duration: 0
        }
    }

【讨论】：

【解决方案7】：

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);

这应该工作;）

【讨论】：

options.animation 在文档中的哪个位置列出？ chartjs.org/docs/latest/general/options.html 和 chartjs.org/docs/latest/configuration/animations.html 都没有提到布尔“animation”属性。
@Dai 不要将 4 年前的答案与当前文档进行比较。
但你的答案确实适用于当前版本的 ChartJS，这就是为什么我给你一个赞成票。

【解决方案8】：

options: {
    animation: {
        duration: 0
    }
}

【讨论】：

比未记录的 animation: false 技巧更清洁的方法 IMO。将duration 设置为0 Stills 允许在渲染完成后使用options.animation.onComplete() 回调在图表上进行自定义绘图。

【解决方案9】：

为了防止阅读回答该特定示例的所有已接受答案，禁用图表 js 中的动画：

在初始化特定图表类型时在您的选项中传递一个对象并使用以下键/值对：animation: false。例如myChart.Bar(myCanvas, {animation:false});

【讨论】：