时间戳

首页 > 解决方案 > 我更改了 xaxis 的最小值和最大值，但是如何更改“导航器”？

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

问题描述

我正在利用 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 调整大小是正确的，但后续没有解决。

标签： javascriptangularhighcharts

解决方案

2 折叠答案。

首先，您需要使用 setExtremes 函数，而不是显式设置最小值和最大值。您应该有一个引用 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 不是一回事。你是对的。你会想要实现它。我会搜索堆栈溢出以获得良好的实现。

现在您有了图表指南。

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

推荐阅读