highcharts - 在 Highcharts ng的click事件中,无法更新Highcharts系列

  显示原文与译文双语对照的内容
0 0

我正在使用 angular.js 和 highcharts ( https://github.com/pablojim/highcharts-ng ) 来显示一组图表。 我需要根据其他图表的单击事件来更新图表。 我可以以在控制器中做任何事,但当我在单击事件( 尽管 $scope 可用) 时,我不能让图表重绘。 这在控制器中的方法中工作良好。

我尝试使用 $apply,,并在 Highcharts.charts array 中查找图表对象,以便在图表上调用重绘,并且它没有工作。 我注意到使用in实例化的图表与在JQuery样式( 例如系列。setdata ) 中实例化的函数似乎没有相同的函数。

从这个 fiddle ( http://jsfiddle.net/gregorydickson/mJjk2/ ):

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
 $scope.addSeries = function () {
 $scope.highchartsNG.series = [{
 data: [55, 33, 41, 23, 37]
 }] 
 }
 $scope.highchartsNG = {
 options: {
 chart: {
 type: 'line'
 }
 },
 series: [{data: [10, 15, 12, 8, 7]}],
 title: {
 text: 'Hello'
 },
 loading: false
 }
 $scope.highchartsNG2 = {
 options: {
 chart: {
 type: 'line'
 }
 },
 series: [{
 data: [1, 2, 3, 8, 7],
 events: {
 click: function (e) {
 alert("hit the click");
//this does not work!!
 $scope.highchartsNG.series = [{
 data: [11, 22, 33, 44, 33,22,11]}];
 }
 }
 }],
 title: {
 text: 'Hello 2'
 },
 loading: false
 }
});

html :

<div ng-app="myapp">
 <div ng-controller="myctrl">
 <button ng-click="addSeries()">Change Data</button>
 <highchart id="chart1" config="highchartsNG"></highchart>
 <highchart id="chart2" config="highchartsNG2"></highchart>
 </div>
</div>
时间:原作者:7个回答

0 0

不是完美的,但你可以使用该解决方案: http://jsfiddle.net/mJjk2/14/

 series: [{
 data: [1, 2, 3, 8, 7],
 events: {
 click: function (e) {
 angular.element('#myselector').trigger('click');
 }
 }
 }],

但是如果你没有这样的按钮,它就不能工作。 从开发工具我可以说,$watch() 不会从回调( 不知道这个插件的作者很好的问题) 调用。 注意:我不是 Angular 专家;)

原作者:
0 0

最后一个解决方案是创建自己的指令,而不是使用in在 Highcharts.charts [] ( array ) 中获取图表中的数据。

 point: {
 events: {
 click: function(e) {
 Highcharts.charts[2].setTitle({text:"Load Profile"+ formattedDate},{},false);
 Highcharts.charts[2].series[0].setData(newday[0].values, false); 
 Highcharts.charts[2].series[1].setData(newday[0].temps, false);
 Highcharts.charts[2].redraw();
原作者:
...