Highcharts - 默认设置以外的动画

Question

Highcharts JS(highcharts.com)中有一个选项可以在图表加载时更改动画吗？现在,在柱形图上,列从底部向上滑动.是否可以将默认动画更改为反弹？

Answer 1

当然,在图表选项中添加动画持续时间和缓动选项.例如,反弹:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        animation: {
            duration: 1500,
            easing: 'easeOutBounce'
        }
    },
    ...
});

这里看到的例子http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Answer 2

可以使用'loading'选项控制加载动画.它定义了一个可以为主题的CSS对象.您可以使用动画图像作为背景,为加载显示设置动画.http://highcharts.com/ref/#loading

通过选项的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);

另外要显示CSS对象,需要调用chart.showLoading();