无法使用highcharts-ng更新Click事件中的Highcharts系列

时间:2014-07-22 15:23:46

标签: angularjs highcharts highcharts-ng

我正在使用angular.js和highcharts-ng(https://github.com/pablojim/highcharts-ng)来显示一组图表。我需要根据另一个图表的点击事件更新图表。我可以在控制器中执行我想要的所有操作但是当我在click事件中有代码时(即使$ 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>

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

我的最终解决方案最终是创建我自己的指令,而不是使用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();