javascript - Highcharts 系列数据不会因 Angular 路线变化而持续存在

Question

我正在将 Highcharts 与 AngularJS 结合使用。我有一个生成图表的指令。在链接函数中，我指定了一个默认对象 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);
    };
}

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

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

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

经过仔细检查，似乎 Highchart 的 addSeries() 函数正在将新对象推送到我坚持的数组以外的某个数组，但我不知道如何将其推送到工作。

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

Answer 1

一种方法是将该数据保存在根范围内(但这不是最好的方法)。

另一种方法是使用 Angular 服务来存储这些数据。并在您需要的地方包含此服务。

与 Controller 不同的 Angular 服务在更改 View /页面时不会重置。

我建议您创建一个存储图表选项的 Angular 服务，其中包含图表选项对象以及 getter 和 setter。您还可以在此服务中保存对图表对象进行更改的函数。

在您的情况下，您似乎对 Controller 内的图表对象进行了操作(也许是在从服务获取它之后？)，如果是这样，您将必须将新对象设置回服务。

此外，当我说服务时，我的意思是这样的:

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 对象。

另外，如果我没记错的话，您想要做的就是像这样 chart.addSeries(newSeriesObject) 添加 newseriesobject，这可以解决您的 highchart 困境。为什么不下一步更新图表对象:scope.passedObject.chartOptions.series.push(newSeriesObject)？虽然如果我这样做的话，我也希望它成为服务的一部分，但所有的 Highcharts 操作都只是服务的一部分，我将在上面的服务中拥有这样的功能:

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