2

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

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) 将图表平滑地重绘为该值。

我的问题是我很难以角度重新制作它。尤其是 highcharts-ng，它似乎拥有所有的例子，除了更新现有的点。

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

有添加系列、删除系列等。更新系列怎么样？如果我们想要一个与不断变化的范围变量相关联的系列怎么办？我如何在下拉框中制作 $scope.$watch 告诉图表更新点？

4

1 回答 1

1

关键是更新系列中的数据数组，highcharts 将负责平滑过渡。例如：

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

在这里，我为您更新了示例以显示平滑的更新过渡： JsFiddle

还有一个下拉和观看的例子： JsFiddle

希望有帮助。如果您对它的工作原理有任何疑问，请告诉我。

于 2014-04-04T17:46:55.333 回答