我更改了xaxis的最小值和最大值，但是如何更改“導航器”？

Question

我正在利用Highcharts的HighStock“圖表”顯示一些信息。 我更新了我的系列，並更新了xAxis的最小值和最大值，但是似乎導航器的作用域仍然存在。

我正在瀏覽文檔，卻沒有找到將滑塊重置為min-max的方法？

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

這設置了范圍，其中fromtime和totime是日期時間，但是到第二個，因此我需要進行相應的調整。 我沒有看到任何其他關鍵屬性，這些屬性可以立即識別xAxis的滑動條范圍/縮放。

當我查找導航器信息時，我注意到它的默認值應為adaptToUpdatedData: true 。 似乎第二秒之后的每次都不會更新導航器。 不知道為什么它允許1調整大小是正確的，但是后續的解析沒有解決。

Answer 1

2折的答案。

首先，您需要使用setExtremes函數，而不是顯式設置最小值和最大值。 您應該有一個引用highcharts的變量。

highcharts = Highcharts;

例如在您的組件中。 接下來需要調用：

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

但還有1個其他問題。 首先，這是希望您一次只渲染1個圖表，因為這會監視內存中的所有圖表。 我有5個，因此您需要確保您擁有正確的一個。

為此，您需要為圖表分配唯一的標識符。

private _guid: Guid
chartOptions :any = {}

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

現在，您可能會認為Guid不是一回事。 你是對的。 您可能想要實現這一點。 我將搜索Stack溢出以尋求良好的實現。

現在，您有了圖表的向導。

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;
  }
}