我正在将 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
中。然而,在记录和观察对象之后,情况似乎并非如此。
最佳答案
一种方法是将该数据保存在根范围内(但这不是最好的方法)。
另一种方法是使用 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);
}
关于javascript - Highcharts 系列数据不会因 Angular 路线变化而持续存在,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37750882/