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

【问题标题】：Cannot update Highcharts series in click event with highcharts-ng无法使用 highcharts-ng 在点击事件中更新 Highcharts 系列
【发布时间】：2014-07-22 15:23:46
【问题描述】：

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

我尝试使用 $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>

【问题讨论】：

我想我可能已经找到了一个解决方案，它可以直接访问 Highcharts.charts 数组中的图表并调用 addSeries （然后删除其他系列）。 Highcharts.charts[0].addSeries({ data: [11, 22, 33, 44, 33,22,11]},true);
好的，这是我要采用的解决方案，除非我找到 highcharts-ng 方法：jsfiddle.net/gregorydickson/GCwRj
使用 ng-highcharts 0.0.7 在这里遇到同样的问题。想知道您现在是否有更好的解决方案？操纵 Highcharts.charts[0].series 看起来很脏......
如果你想查看代码，我可以让你访问我的 github 仓库，因为它是为客户准备的，所以它是一个私人仓库，但欢迎你看看它是如何工作的。
那太好了。我认为如果您可以在这里分享您如何解决它（没有黑客攻击），这可能对公众更有益，但当然这完全取决于您。

标签： angularjs highcharts highcharts-ng

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：