logo标签列表

使用Charts.js禁用动画

javascriptcharts
113

我在使用charts.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);

有人可以提供一个例子吗？

11个回答
152
options: {
    animation: {
        duration: 0
    }
}
7
在我看来，这种方法比未记录的 animation: false 技巧更为简洁。将 duration 设置为 0 仍然可以使用 options.animation.onComplete() 回调函数，在渲染完成时为图表进行自定义绘制。 - Maxime Pacary
93
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);

应该可以行得通 ;)

6
“options.animation”在文档的哪里列出？无论是http://www.chartjs.org/docs/latest/general/options.html还是http://www.chartjs.org/docs/latest/configuration/animations.html都没有提到布尔类型的“animation”属性。 - Dai
3
请勿将4年前的回答与现有文档进行比较。 - Skrzypek
3
但是你的答案在当前的 ChartJS 版本中确实有效，这就是我给你点赞的原因。 - Dai
2
https://www.chartjs.org/docs/latest/configuration/animations.html#:~:text=Disabling%20animation,setting%20the%20duration%20to%200%20.&text=Copied! - Amani Arman
24
尝试这个：
options: {
    animation: {
        duration: 0, // general animation time
    },
    hover: {
        animationDuration: 0, // duration of animations when hovering an item
    },
    responsiveAnimationDuration: 0, // animation duration after a resize
}
16
根据文档(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
    }
});
15

嗨，以下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: {
         }
       });
10
为了防止阅读所有回答来回答特定示例，在图表JS中禁用动画：
在初始化特定的图表类型时，通过传递一个对象到选项参数中，并使用以下键值对：animation: false。例如：myChart.Bar(myCanvas, {animation:false});
9
7
options{
    animation: false
}
4
这应该会有所帮助：
    chartOption = {
        animation:{
            duration: 0
        }
    }
1

对于那些在使用时无法禁用动画的人：

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

给图表设置一个固定高度。如果父元素是响应式的，它可能会导致图表重新渲染，并使其看起来好像动画未被禁用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接