我改变了xaxis的最小值和最大值,但是如何更改“导航器”?

问题描述 投票:0回答:1

我正在利用Highcharts的“HighStock”图表来显示一些信息。我更新了我的系列,并更新了xAxis的最小值和最大值,但似乎范围仍然是导航器。

我正在查看文档并没有看到将滑块重置为最小 - 最大值的方法吗?

this.chartOptions.xAxis[0].min = fromTime * 1000;
this.chartOptions.xAxis[0].max = toTime * 1000;
this.chartOptions.series = [];
/// ...
/// gets data set.
/// ...
this.update = true;

这设置范围,从时间和全时是日期时间,但到第二,所以我需要相应地调整。我没有看到任何其他关键属性立即识别xAxis的滑动条范围/缩放。

当我查找导航器信息时,我注意到它的默认值应该是adaptToUpdatedData: true。似乎每次在第二次之后都不会更新导航器。不确定为什么它允许1调整大小正确,但后续不解决。

javascript angular highcharts
1个回答
0
投票

2折叠答案。

首先,您需要使用setExtremes函数,而不是显式设置min和max。你应该有一个引用highcharts的变量。

highcharts = Highcharts;

例如在您的组件中。接下来你需要打电话:

this.highcharts.charts[0].xAxis[0].setExtremes(fromTime * 1000, toTime * 1000);

但还有另外一个问题。首先,这是期望您一次只渲染1个图表,因为它监视内存中的所有图表。我有5,所以你需要确保你有合适的。

为此,您需要为图表指定唯一标识符。

private _guid: Guid
chartOptions :any = {}

constructor(){ 
  this._guid = Guid.newGuid(); 
  this.chartOptions.guid = this._guid;
}

现在,你可能会想,Guid不是一件事。你是对的。你想要实现它。我会搜索Stack overflow以获得良好的实现。

现在您已经掌握了图表的指南。

getChart() => this.highcharts.filter( chart => chart["userOptions"].guid == this._guid)[0];

现在你有了正确的图表。

然后,您可以根据需要更改变量。

getChart().xAxis[0].setExtremes(a,b);

它将全部聚集在一起:

export class testComponnt implemented OnInit {
  chartOptions = {};  //StockChart specific options.
  private _guid: Guid;
  highcharts = Highcharts;
  getChart() => this.highcharts.charts.filter( chart => chart["userOptions"].guid == this._guid)[0];
  constructor(){
    this._guid = Guid.newGuid();
    this.chartOptions.guid = this._guid;
  }

  updateData() {
    let chart = getChart();
    if (!chart) return;
    chart.xAxis[0].setExtremes( fromTime * 1000, toTime * 1000 );
    this.chartOptions.series = [];
    //  data manipulation here.
    this.update = true;
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.