javascript Highcharts - 非默认动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3604663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts - animations other than the default
提问by hookedonwinter
Is there an option in Highcharts JS (highcharts.com) to change the animation when a chart loads? Right now, on a column chart, the columns slide up from the bottom. Is it possible to alter the default animation to, say, bounce?
Highcharts JS ( highcharts.com) 中是否有选项可以在图表加载时更改动画？现在，在柱形图上，列从底部向上滑动。是否可以将默认动画更改为反弹？
回答by benmod
Sure, to your chart options add the animation duration and easing options. For example, to bounce:
当然，在您的图表选项中添加动画持续时间和缓动选项。例如，要反弹：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: {
duration: 1500,
easing: 'easeOutBounce'
}
},
...
});
Example seen here http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/
回答by xer0x
The loading animation can be controlled using the 'loading' option. It defines a CSS object that you can theme. You can animated the loading display by using an animated image as the background. http://highcharts.com/ref/#loading
加载动画可以使用“加载”选项来控制。它定义了一个可以主题化的 CSS 对象。您可以使用动画图像作为背景来动画加载显示。http://highcharts.com/ref/#loading
To change the text that it displays via the lang property of options. See http://highcharts.com/ref/#langfor more. I usually just set it to blank.
通过选项的 lang 属性更改它显示的文本。有关更多信息，请参阅http://highcharts.com/ref/#lang。我通常只是将其设置为空白。
var options = {
style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' },
lang: { loading: '' }
};
var chart = new Highcharts.Chart(options);
Plus to display the CSS object, you need to call chart.showLoading();
另外要显示CSS对象，你需要调用chart.showLoading();
回答by KingJia
It was moved under "series" object istead of chart
它被移动到“系列”对象下而不是图表
http://api.highcharts.com/highstock#plotOptions.series
http://api.highcharts.com/highstock#plotOptions.series
Something like this:
像这样的东西：
series: [{
animation:{
duration: 10000
},
type: 'pie',
name: 'Percentuale per periodo',
data: [
['2 anni', 13.0],
['3 anni', 41],
['4 anni', 17],
['5 anni', 17],
['7 anni', 4],
['8 anni', 8]
]
}]
回答by jayseattle
I don't see any animation effect from the answer referencing the fiddle:
我没有从引用小提琴的答案中看到任何动画效果：
Example seen here http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/
Even trying elevated value as here: http://jsfiddle.net/p9EuZ/
甚至尝试提高价值，如这里：http: //jsfiddle.net/p9EuZ/
chart: {
animation: {
duration: 6222500,
easing: 'easeOutBounce'
}
}
