javascript - 用highcharts饼图扫描动画

我正在尝试将数据更新动画化为使用Highcharts构建的饼图。

这是我一起破解的演示，展示了我尝试制作的动画的非常原始的版本：http://jsfiddle.net/HsspB/

hack通过setInterval实现动画：

    var iTimer = setInterval(step, 25);
    function step() {
        iCurrent = Math.min(iCurrent+3, iFinal);
        tChart.series[0].setData(
            [
                { 'y': iCurrent, 'color': '#f2b000', 'name': null },
                { 'y': 100-iCurrent, 'color': '#fae09e', 'name': null }
            ],
            true
        );
        if(iCurrent === iFinal) clearInterval(iTimer);
    }

我之所以没有使用确切的代码，是因为它显然是一种hack，而且似乎Highcharts必须已经通过其API实现了这一点，如果我只知道如何表达的话。

hack完全是程序性的（而不是声明性的），这意味着我必须实际制定步骤并对其进行数学建模，而不是指定持续时间，过渡类型和缓动函数。

我想知道这是否是Highcharts提供的（大概是通过chart.animation属性），以及如何实现它。如果没有明确的支持，我可能会对如何采用自己的方法的建议感兴趣，包括是否有Highcharts API的其他相关部分比依靠完整的数据更新（例如系列）更适合此类工作。 .setData（））。嘿-如果我可以通过CSS动画做到这一点，那么我也很酷。

（考虑后备时，我使用的是jQuery 1.8.3和核心jQueryUI 1.8.6）

任何帮助表示赞赏。

最佳答案

在已经存在的点上使用Point.update方法更有效。使用此方法，仅更新点，而不是随后删除所有点并进行设置。

这样说，我将您的代码示例修改为
    函数step（）{

    iCurrent = Math.min(iCurrent + 3, iFinal);
    y = tChart.series[0].data[1].y;
    tChart.series[0].data[1].update(y + 3, true, {
        duration: 1500,
        easing: 'swing'
    });
    console.log(tChart.series[0].data[1]);

    if (iCurrent === iFinal) clearInterval(iTimer);
}

另请参见工作示例http://highcharts.com/jsbin/utifem/7/edit

关于javascript - 用highcharts饼图扫描动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14388279/