Question

我正在尝试将数据更新设置为使用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);
    }

我没有使用那些确切的代码的原因是它显然是一个黑客攻击，似乎Highcharts必须已经通过它的API实现这一点，只要我知道如何表达它。

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

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

（当考虑回退时，我使用的是jQuery 1.8.3和核心jQueryUI 1.8.6）

感谢任何帮助。

Answer 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

使用highcharts馅饼扫描动画

1 个答案: