Cannot update Highcharts series in click event with highcharts
I am using angular.js and highcharts-ng (https://github.com/pablojim/highcharts-ng) to display a group of charts. I need to update a chart based on a click event of another chart. I can do everything I want to in the controller but when I have code in the click event (even though $scope is available) I cannot seem to get the chart to redraw after I set the series data. This works fine in a method in the controller.
I have tried using $apply, and also looking up the chart object in the Highcharts.charts array to call redraw on the chart and it did not work. I noticed that the charts instantiated with highcharts-ng do not seem to have the same functions on them as ones instantiated in the JQuery style (such as Series.setData).
From this 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>
Not a perfect, but you can use that solution: http://jsfiddle.net/mJjk2/14/
series: [{
data: [1, 2, 3, 8, 7],
events: {
click: function (e) {
angular.element('#myselector').trigger('click');
}
}
}],
But if you don't have such button to trigger, it won't work. From dev-tools I can say that $watch() won't be called from that callback (no idea why, good question for author of that plugin). Note: I'm not angular expert ;)
我的最终解决方案是创建我自己的指令，而不是使用highcharts-ng，并通过在Highcharts.charts []（数组）中获取图表来更新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();