Highcharts-ng 股票图表在异步加载数据时提供"TypeError: Cannot read property 'hoverSeries' of undefined"

Question

在我的angularjs应用中，我正在使用自定义指令'HighCharts-ng'来生成图表。我有一个JSFIDDLE，可以创建库存图表并与范围定义的数据正确配合，但是当数据通过$ Resource调用到REST API（通过工厂）获取数据时，会出现错误：

与示波器定义数据一起使用的JSFIDDLE

---

对于休息驱动的版本，我有以下功能来查询数据：

function getData(start, end) {
    return measurementsFactory
        .getMeasurements(start, end)
            .then(function(response) {
                return response.data;
            });
    }

REST驱动的Initchart函数然后变为：

function initChart() {
    vm.chartConfig.title.text = 'New Title';
    var yAxis = inityAxis();
    vm.chartConfig.yAxis = yAxis;
    getData(moment(0).valueOf(), moment().valueOf()).then(function(data) {
        var series = initSeries(data);
        vm.chartConfig.series = series;
        vm.chartConfig.navigator.series = series;
    });
}

返回的"数据"数组与JSFiddle中的" vm.testdata数组"相同。图表加载没有任何错误，结果看起来与范围定义的数据JSFIDDLE完全相同。

REAFTSETEXTREMES的休息驱动版本：

function afterSetExtremes(e) {
    if (e.trigger != undefined) {
        getData(Math.round(e.min), Math.round(e.max)).then(function(data) {
            var series = initSeries(data);
            vm.chartConfig.series = series;
        });
    }
}

---

问题

每当我尝试使用按钮，输入或导航器设置时间范围时，我会收到以下错误：

TypeError: Cannot read property 'hoverSeries' of undefined
    at p.destroy (highstock.js:305)
    at p.d.destroy (highstock.js:429)
    at b (highstock.js:334)
    at a.fireEvent (highstock.js:30)
    at p.remove (highstock.js:334)
    at p.<anonymous> (highstock.js:486)
    at a.fireEvent (highstock.js:30)
    at p.remove (highstock.js:334)
    at HighChartNGController.$doCheck (highcharts-ng.js:54)
    at angular.js:9605

和导航器系列消失。我不确定如何从这里进行。

---

编辑1（2017-09-01）

这是一个从REST服务中获取数据的JSFiddle

但是，现在绘制图表时我会遇到不同的错误。

TypeError: Cannot read property 'breaks' of undefined
    at Navigator.init (https://code.highcharts.com/stock/highstock.src.js:35910:50)
    at Navigator.update (https://code.highcharts.com/stock/highstock.src.js:35381:22)
    at H.Chart.<anonymous> (https://code.highcharts.com/stock/highstock.src.js:38494:32)
    at H.Chart.obj.(anonymous function) [as update] (https://code.highcharts.com/stock/highstock.src.js:928:28)
    at HighChartNGController.$doCheck (https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js:119:20)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js:9873:68
    at Scope.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js:18202:34)
    at Scope.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js:18480:24)
    at done (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js:12501:47)
    at completeRequest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js:12727:7)

---

编辑2（2017-09-05）

现在，我拥有按预期工作的纯Highcharts JSfiddle（对轴进行了一些稍微修改）。

Answer 1

经过一些研究，我终于找到了问题：

它来自您设置图表边界的那一刻不存在的轴。为了摆脱此问题，您需要在设置新数据后刷新图表。

罪魁祸首是afterSetExtremes功能。它没有警报视图的事物更改，因此它没有重新绘制图表，但其配置对象仍在更新中，并且Xaxis坐标不再好。

我遇到了这个错误：https：//www.highcharts.com/errors/18

所以这是更新的afterSetExtremes函数：

function afterSetExtremes(e, scope) {
 if (e.trigger != undefined) {
   getData(Math.round(e.min), Math.round(e.max)).then(function(data) {
     var series = initSeries(data);
     scope.$apply(function() {
       scope.chartConfig.series = series;
     });
   });
 }
}

以及如何将其调用到图表配置对象中（请注意，范围是给予该函数的，以便在其上调用$apply()：

xAxis: [{
  type: 'datetime',
  minRange: 3600 * 1000,
  events: {
    afterSetExtremes: afterSetExtremes(vm)
  }
}],

我还将此功能添加到HighCharts配置对象，因为ng-highcharts已知可以将图表拧紧：

func: function(chart) {
  vm.$evalAsync(function() {
    chart.reflow();
  });
}

最后，这是您的工作小提琴。