Я изменяю минимальное и максимальное значения оси X, но как мне изменить «навигатор»?

Question

Я использую диаграмму HighStock Highcharts для отображения некоторой информации. Я обновляю свою серию и обновляю значения 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;

Устанавливает диапазоны, где время и время являются датами и временем, но с точностью до секунды, поэтому мне нужно было соответственно отрегулировать. Я не видел никаких других ключевых свойств, которые сразу же распознавали масштаб и масштаб ползунка xAxis.

Когда я искал информацию о навигаторе, я заметил, что по умолчанию она должна быть adaptToUpdatedData: true. Кажется, что каждый раз после второго не будет обновлять навигатор, хотя. Не уверен, почему это позволяет 1 изменить размер, чтобы быть правильным, но последующие не разрешаются.

Answer 1

2 Сложите ответ.

Прежде всего, вам нужно использовать функцию setExtremes, а не явно устанавливать min и max. У вас должна быть переменная, ссылающаяся на старшие диаграммы.

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

Теперь, вы можете подумать, что Гуид не вещь. Ты прав. Вы хотели бы реализовать это. Я бы искал переполнение стека для хорошей реализации.

Теперь, когда у вас есть гид для вашей диаграммы.

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