我正在利用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调整大小正确,但后续不解决。
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;
}
}