使用Highcharts动态加载新数据的动画

时间:2015-09-12 15:46:59

标签: javascript animation highcharts

我必须在折线图上切换两个数据集,请参阅this fiddle。一个具有线性x轴,另一个具有对数x轴。更新数据没有问题:

chart.series[0].setData( data2, false);
chart.xAxis[0].update({type: "logarithmic"}, false);
chart.redraw();

问题是数据未动画之间的转换。从数据集1到数据集2,图表跳转,但奇怪的是,显示数据按相反顺序,首先设置2,然后设置1,是动画

在参考文献here中,他们说明setData()设置动画时设置不同长度的新数据的第三个参数,但将其设置为true{duration: x}没用。

编辑:

到目前为止,感谢您的回复,但显然我没有说清楚,但为了得到我的意思,您应该仔细查看我链接到的小提琴中的动画。单击数据集2(未设置过渡动画)时比较动画,然后单击另一个按钮返回初始数据集(您将看到动画过渡)。 如果Highcharts可以设置从第2组到第1组的转换动画,为什么它不能使用相同的代码在第1组到第2组的反向显示相同的动画?

1 个答案:

答案 0 :(得分:2)

请参阅此Highcharts loading animation after setdata

我在Highcharts Champ Sebastian的回答中找到的重点是: setData()之后的动画在高级图表中不可用

所以你应该使用chart.destroy删除现有的系列,然后创建new来查看动画。

chart.series[0].remove();
chart.addSeries({data:[yourData]}) //and other values like type etc

对于默认动画尝试此

   chart: {
        animation: {
            duration: 2000, //whatever you want
            easing: 'easeOutBounce'
        }
    }