Добавить начальную и конечную дату в Range Selector Highstock

Question

У меня есть диаграмма с Highstock и Range-Selector. Я вижу только несколько точек дат в навигаторе. Я хочу иметь возможность отображать начальную и конечную даты. Как я могу настроить это?

Я попытался проверить количество тиков и некоторые подпорки для оси, но удачи там не было.

//A,B,C data array
Highcharts.stockChart('container', {
    series: [
      { data: A },
      { data: B },
      { data: C }
    ]
});

То, что я хочу, - это возможность установить дату начала и дату окончания в навигаторе выбора диапазона.

Вот jsfiddle: https://jsfiddle.net/usvonfjh/1/

Answer 1

Это можно сделать с помощью navigator.xAxis.tickPositions, где вы можете передать массив с отображаемыми тиками и navigator.xAxis.labels.formatter для создания удобочитаемых дат из временных отметок позиций тиков.

Код:

  navigator: {
    xAxis: {
      tickPositions: aSerie.map(elem => elem[0]),
      labels: {
        formatter: function() {
            return Highcharts.dateFormat('%e. %b', this.value);
        },
        align: 'center'
      }
    }
  }

Демо:

• https://jsfiddle.net/BlackLabel/rx18hL37/1/

Справочник по API:

• https://api.highcharts.com/highstock/navigator.xAxis.tickPositions

• https://api.highcharts.com/highstock/navigator.xAxis.labels.formatter

• https://api.highcharts.com/class-reference/Highcharts#.dateFormat