Question

我正在利用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;

这设置了范围，其中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;
  }
}

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

1 个答案: