Javascript 使用Charts.js禁用动画
使用charts.js关闭动画时遇到问题 这是我的代码: 有人能举个例子吗Javascript 使用Charts.js禁用动画,javascript,charts,Javascript,Charts,使用charts.js关闭动画时遇到问题 这是我的代码: 有人能举个例子吗 var pieData = [{ value: 30, color: "#F38630" }, { value: 50, color: "#E0E4CC" }, { value: 100, color: "#69D2E7" }]; var pieOptions = { animation: false }; var ctx = document.getEl
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);
这应该行得通;) 要防止阅读回答该特定示例的所有已接受答案,请禁用图表js中的动画:
初始化特定图表类型时,在选项中传递对象,并使用以下键/值对:
动画:false
。e、 g.myChart.Bar(myCanvas,{animation:false})代码>这应该可以做到:
chartOption = {
animation:{
duration: 0
}
}
Hi以下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: {
}
});
试试这个:
options: {
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
}
这也可以在全球范围内完成:
Chart.defaults.global.animation.duration=0
Via:根据文档()这里是完全禁用动画的方法:
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
}
});
文档中列出的options.animation
在哪里?两者都不是,并且提到布尔“动画”
”属性。@Dai不要将4年前的答案与当前文档进行比较。但是你的答案与当前版本的ChartJS有效,这就是为什么我给你一个向上投票的原因。这种方法比未记录的动画:false
技巧更简洁。将duration
设置为0
stills允许在渲染完成后,对图表上的自定义图形使用选项.animation.onComplete()
回调。
Chart.defaults.global.animation = false;
var myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
}
});
options: {
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
}
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
}
});