使用 Charts.js 禁用动画
Posted
技术标签:
【中文标题】使用 Charts.js 禁用动画【英文标题】:Disable Animation with 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);
谁能举个例子?
【问题讨论】:
【参考方案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);
【讨论】:
以上是关于使用 Charts.js 禁用动画的主要内容,如果未能解决你的问题,请参考以下文章