有没有办法暂时禁用整个图表的动画?我的图表有一个加载事件导致图表的轴改变位置,并且不需要为此设置动画。不过,我希望整个图表的动画都处于事件状态,这样如果有人与图表进行交互(例如勾选图例项),更新就会动画化。
我制作了一个示例图表 here .
var chart = new Highcharts.chart({
chart: {
//animation: false,
type: 'spline',
width: 600,
renderTo: 'chart-container',
events: {
load: function() {
this.update({
chart: { spacingBottom: 50 }
})
}/*,
render: function() {
this.update({
chart: {
animation: true
}
})
}*/
}
},
title: {
text: 'Title',
align: 'left'
},
subtitle: {
text: 'Subtitle',
align: 'left'
},
series: [{
name: 'First series',
data: [50,60,70,80],
color: '#5995ae'
},
{
name: 'Second series',
data: [43,53,43,49],
color: '#cf921c'
},
{
name: 'Third series',
data: [49,38,51,79],
color: '#abd309'
}]
});
在示例中,spacingBottom 在图表加载后更改。这会导致我想禁用动画(xAxis 向上移动),但我似乎无法弄清楚如何专门禁用轴的动画。
如果我简单地禁用所有动画 (chart.animation = false),违规动画将被禁用,但这也意味着禁用我想保留的所有其他动画。
您可以看到我试图在渲染上添加一个额外的事件(目前已注释掉),但实际上浏览器无法同时处理加载和渲染事件的额外工作量。除非我遗漏了什么。
如果我能以某种方式专门在加载事件期间禁用所有动画,那就太好了。
最佳答案
我不确定这是否是适用于所有情况的解决方案,但它似乎确实适用于您的情况。
您可以通过为重绘参数 https://api.highcharts.com/class-reference/Highcharts.Chart#update 传递一个假值来告诉更新不要重绘。 .然后你可以通过为动画参数 https://api.highcharts.com/class-reference/Highcharts.Chart#redraw 传递一个 false 来在没有动画的情况下重绘。 .
events: {
load: function() {
this.update({
chart: { spacingBottom: 50 }
}, false);
this.redraw(false);
}
关于javascript - Highcharts:禁用特定事件的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47792250/