setData上的Highcharts区域图动画

时间:2015-09-28 17:03:51

标签: javascript animation highcharts

我有一个HighCharts.js图表​​,当点击一个按钮时,会调用setData来添加另一个数据点。

我希望改变那个将它从0带到当前下一个数据点的动画,而不是从左到右平滑地动画,好像它只是填充/扩展一样。加载时会显示精确动画。

我将setData简单地设置如下,其中animation属性设置为true。

series.setData(data, true, true);

我创建了这个http://jsfiddle.net/44ejxsaa/1/来创建一个我正在获得的动画的简单示例。请点击几下按钮查看。

1 个答案:

答案 0 :(得分:2)

您可以从数组中删除0个条目,因为它们会导致图表从最后一个点连接到轴:

SingupVC

然后设置默认data = [29.9, 71.5, 106.4, 129.2, 144.0]; minRange,这样您在初始化时仍然会看到轴为12:

min

然后使用xAxis: { labels: { style: { fontSize: '13px' } }, min: 0, minRange: 12, }, 代替addPoint来获取添加点的默认动画。它与您在加载时看到的不完全相同 - 这一点立即出现。

setData

我还将series.addPoint({x : arrayLocation, y: increasingValue}); 初始化为5以使其正常工作(否则它会在arrayLocation生成两个点。

x=5

fiddle