无法使用highcharts-ng更新Highcharts系列点击事件

我正在使用angular.js和highcharts-ng（https://github.com/pablojim/highcharts-ng）来显示一组图表。我需要根据另一个图表的点击事件来更新图表。我可以在控制器中做所有我想做的事情，但是当我在click事件中有代码时（即使$ scope可用），我似乎无法在设置系列数据后重新绘制图表。这在控制器的方法中工作正常。无法使用highcharts-ng更新Highcharts系列点击事件

我曾尝试使用$ apply，并且在Highcharts.charts数组中查找图表对象以调用图表上的重绘，但它无效。我注意到使用highcharts-ng实例化的图表与在JQuery样式中实例化的图表（例如Series.setData）似乎没有相同的功能。

从这个小提琴（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>

来源

2014-07-22 Gregory D. Dickson

我想我可能找到了一个解决方案，它可以直接访问Highcharts.charts数组中的图表并调用addSeries（然后删除其他系列）。 Highcharts.charts [0] .addSeries（{[122，33，44，33，22，11]，true）; –

好的，下面是我要用的解决方案，除非我找到highcharts-ng方法：http://jsfiddle.net/gregorydickson/GCwRj/ –

在这里使用ng-highcharts 0.0.7运行到同样的问题。想知道现在是否有更好的解决方案？操纵Highcharts.charts [0]。系列似乎肮脏为地狱... – saladinxu

我的最终解决方案最终创建了我自己的指令，不使用highcharts-ng并通过在Highcharts中获取图表来更新click事件中图表上的数据。图表[]（数组）。

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();

来源

2015-04-09 14:18:01

不是一个完美的，但您可以使用该解决方案：http://jsfiddle.net/mJjk2/14/

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

但是，如果你不没有这样的按钮可以触发，它不会起作用。从开发工具，我可以说，$watch()将不会从该回调调用（不知道为什么，该插件的作者的好问题）。注意：我不是角度专家;）

来源

2014-07-23 10:44:05

无法使用highcharts-ng更新Highcharts系列点击事件

回答

相关问题