2

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

任何帮助表示赞赏。

4

1 回答 1

1

在已经存在的点上使用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

于 2013-01-31T15:11:31.890 回答