Highcharts使用Angular和ng-highcharts平滑过渡数据

时间:2014-04-04 16:12:05

标签: angularjs highcharts highcharts-ng

我最近制作了一个严格按照jquery工作的高图原型。我有一堆意大利面条代码,但在选择一个可以动画图表并更新系列的控制器时,我也有一个很好的过渡动画。简而言之,就是这样......

var chart = new Highcharts.Chart(chartOptions);
// ...
$('select#dropdown').change(function(){
  // ...
  chart.series[0].setData(/*data*/, false);
  chart.series[1].setData(/*data*/, false);
  chart.series[2].setData(/*data*/, false);
  // ...
  chart.redraw();
}

所以图表(1)在页面加载时初始化,(2)从下拉框中取一个参数(3)决定给定系列的新值是什么,(4)平滑地将图表重绘为该值。 / p>

我的问题是,我很难以角度重新制作它。特别是highcharts-ng,它似乎在阳光下有各种例子,除了更新现有的点。

http://pablojim.github.io/highcharts-ng/examples/example.html

有添加系列,删除系列等内容。如何更新系列?如果我们想要一个与范围变量相关的系列怎么办?我如何制作$ scope。$ watch在下拉框中告诉图表更新积分?

1 个答案:

答案 0 :(得分:1)

关键是更新系列中的数据数组,高图表将负责平滑过渡。 例如:

 $scope.chartConfig.series[0].data = rnd;

这里我更新了示例,以便您显示平滑的更新过渡:  JsFiddle

下拉并观看的示例: JsFiddle

希望有所帮助。如果您对其工作方式有任何疑问,请与我们联系。