Highcharts - 非默认动画答案

【问题标题】：Highcharts - animations other than the defaultHighcharts - 非默认动画
【发布时间】：2011-04-06 00:03:09
【问题描述】：

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

【问题讨论】：

标签： javascript animation charts highcharts

【解决方案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/

【讨论】：

【解决方案2】：

可以使用“加载”选项控制加载动画。它定义了一个可以主题化的 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();

【讨论】：

我知道 OP 接受了这个作为答案，但作为第三方，这个回复似乎没有解决有关数据动画的问题，而是谈论自定义微调器类型的“忙碌”指示器。这些是单独的关注点（例如，您可以在同一个图表上自定义两者）。 -1

【解决方案3】：

它被移到“系列”对象而不是图表下

http://api.highcharts.com/highstock#plotOptions.series

类似这样的：

    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]
        ]
    }]

【讨论】：

【解决方案4】：

我没有从引用小提琴的答案中看到任何动画效果：

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

甚至像这里一样尝试提升价值： http://jsfiddle.net/p9EuZ/

    chart: {
        animation: {
            duration: 6222500,
            easing: 'easeOutBounce'
        }
    }

【讨论】：

同意。这个问题还专门询问“加载”动画，而不是“更新”动画。