javascript - Highcharts + Angularjs : Graph doesn't redraw when adding series from an external event

Question

首先，这是我的示例的 jsfiddle: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 中的代码正在使用超时。

看到这个 fiddle ...

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

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

可以在此处找到有关超时、$timeout 和 $apply 的更多信息 https://coderwall.com/p/udpmtq