Highcharts + Angularjs:从外部事件添加系列时,图形不会重绘

Question

首先,这是我的例子:http://jsfiddle.net/Kn4PW/4/

我有2个图表.一个有列,一个有线.我想要的是当我点击第一张图表的一列时,可以在第二张图表上添加一个系列.

在我的示例中,当我单击列时,系列会添加到第二个图表的配置中,但图表不会重绘.我们可以看到,因为当我点击按钮添加系列时,会出现所有系列并重新绘制图形.

我的问题是,当我从柱形图中发射事件时他不是为什么不是这样做的？

谢谢

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {


    $scope.addSeries = function () {
        var rnd = []
        for (var i = 0; i < 10; i++) {
            rnd.push(Math.floor(Math.random() * 20) + 1)
        }
        $scope.highchartsNG.series.push({
            data: rnd
        })
    }



    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'line',
                events: {
                    redraw: function() {
                        alert ('The chart is being redrawn');
                    }

                }
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }

    $scope.bubbleConfig = {
        options: {
            chart: {
                type: 'column'

            },
            plotOptions: {
                bubble: {
                    dataLabels: {
                        enabled: true,
                        color: 'black',
                        style: { textShadow: 'none' },
                        formatter: function() {
                                return this.point.name;
                        }
                    }
                },
                series: {
                    cursor: 'pointer',
                    events: {
                        click: function(event) {
                            $scope.addSeries();
                        }
                    }
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
            formatter: function() {
                return this.point.name;
            }
        },

        },


        series: [
            { 
                data: 

                [
                    {"name":"test","x":0.6,"y":1.9},                
                    {"name":"test2","x":0.8,"y":1.5}
                ]

            }

        ]  

    }

});

Answer 1

您需要调用$scope.$apply()以确保应用范围的更改.

这通常不是必需的,但似乎在过程中的某个地方,HighCharts或HighCharts-ng中的代码正在使用超时.

看到这个小提琴......

http://jsfiddle.net/Kn4PW/7/

click: function(event) {
    $scope.addSeries();
    $scope.$apply();
}

有关超时,$ timeout和$ apply的更多信息,请访问https://coderwall.com/p/udpmtq