javascript - Highcharts系列数据不会通过 Angular 路线更改而保留

我在AngularJS中使用Highcharts。我有一个生成图表的指令。在链接函数中，我指定一个默认对象chartOptions。设置默认选项后，我将该对象附加到传递给指令的另一个对象，该对象在路由和刷新之间持久存在，passedObject。因此，成功添加后对chartOptions所做的任何更改都会继续存在。然后，通过调用Highcharts.chart（）生成图表。

return {
    restrict: 'E',
    scope: {
        passedObject: "="
    },
    link: function (scope, element) {

        var chartOptions = {
            title : {
             text: 'sample report'
            }
            ...
        }

        scope.passedObject.chartOptions = scope.passedObject.chartOptions || chartOptions;

        var chart = Highcharts.chart(element[0], scope.passedObject.chartOptions);
    }

    // successfully add new series
    // series rendered immediately but does not persist though view changes and page reload.
    scope.addSeries = function(seriesObject){
        scope.elementObject.chart.addSeries(seriesObject);
    };

    // successfully pushes object to array
    // does not immediately render because Highchart doesn't see change
    // but does render after reloading because Highchart checks options again
    // Does not render with animation like addSeries() API does.
    scope.addSeriesNoAPI = function(seriesObject){
       scope.elementObject.chart.series.push(seriesObject);
    };
}

第一次生成图表没有问题，如果我返回到该视图，则图表将使用相同的默认选项再次生成。

但是，如果我使用Highcharts API以编程方式添加新的数据系列chart.addSeries(newSeriesObject)，则会添加该系列并将其呈现在图表上，但不会在路线和刷新之间持续存在。

如果我通过直接的JS chartOptions手动将系列对象添加到我的scope.passedObject.chartOptions.series.push(newSeriesObject)中，则该对象已成功推送到数组中并将继续存在，但由于它不知道series数组已更改，因此图表不会自动更新，这就是API存在的原因。

经过仔细检查，似乎Highchart的addSeries()函数将新对象推到除我要持久存储的数组之外的其他数组中，但是我不知道如何使它起作用。

我假设这行代码：var chart = Highcharts.chart(element[0], scope.passedObject.chartOptions);将图表绑定到scope.passedObject.chartOptions对象，这样，当addSeries()函数之类的东西添加新系列时，它将被添加到scope.passedObject.chartOptions中。在记录并观察对象之后，情况似乎并非如此。

最佳答案

一种方法是将数据保留在根范围内（但这不是最佳方法）。

另一个是使用角度服务来存储此数据。并在您需要的地方提供此服务。

与控制器不同的角度服务在更改视图/页面时不会重置。

我建议您创建一个存储图表选项的角度服务，该服务具有一个图表选项对象以及一个getter和一个setter。您还可以保留在此服务中更改图表对象的函数。

在您的情况下，您似乎对控制器内的图表对象进行了操作（也许是从服务中获取了吗？），如果是这样，则必须将新对象设置回服务中。

另外，当我说服务时，我的意思是这样的：

app.service('highChartService', function() {
  var chartOptions;
  var highChartServiceObj = {};

  highChartServiceObj.getChartOptions = function() {
      return chartOptions;
  };

  highChartServiceObj.setChartOptions = function (options) {
     chartOptions = options;
  };

  highChartServiceObj.computeChartObject = function () {
    //do some computation
  }

  return highChartServiceObj;

});

将以上服务添加到指令中，并在进行任何更改时使用该服务更新highchart对象。

另外，如果我没有记错的话，您想做的就是添加newseriesobject，例如chart.addSeries(newSeriesObject)，它解决了您的图表难题。为什么不更新下一步的图表对象：scope.passedObject.chartOptions.series.push(newSeriesObject)？尽管如果我这样做，我也希望成为服务的一部分，但是所有highchart操作都将成为服务的一部分，在上面的服务中，我将具有以下功能：

highChartServiceObj.updateChart(newSeriesObject, chart) {
   chartOptions.series.push(newSeriesObject);
   chart.addSeries(newSeriesObject);
}

关于javascript - Highcharts系列数据不会通过 Angular 路线更改而保留，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37750882/