使用 highcharts pie 扫描动画答案

【问题标题】：Sweep animation with highcharts pie使用 highcharts pie 扫描动画
【发布时间】：2013-02-01 02:14:49
【问题描述】：

我正在尝试将数据更新动画化到使用 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）

感谢任何帮助。

【问题讨论】：

标签： javascript animation highcharts pie-chart css-animations

【解决方案1】：

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

话虽如此，我将您的代码示例修改为
函数步骤() {

    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

【讨论】：

谢谢！最后，我只是将所有 series.setData 调用更新为 series.data[i].update 调用；你的演示脚本很有启发性，但不是我想要的。我认为 highcharts 将缓动函数应用于比我想要的更多的几何图形。