Блог

Главная - Вопросы по программированию - Высокие диаграммы показывают ось x с датами

Высокие диаграммы показывают ось x с датами

#highcharts

Вопрос:

У меня есть диаграмма с осью x в датах и фиксированных позициях, которую я хочу отобразить как «Март 2018».

Это определяется как

 xAxis: {
  type: "datetime",
  tickPositions: [
    new Date('2018-03-01'),
    new Date('2019-03-01'),
    new Date('2020-03-01'),
    new Date('2021-03-01'),
  ]
}

и данные серии, как

 data: [
  { x: new Date('2018-03-01'), y: 2.2 },
  { x: new Date('2019-03-01'), y: 3.3 },
  { x: new Date('2020-03-01'), y: 3.2 },
  { x: new Date('2021-03-01'), y: 3.8 },
]

При такой настройке метки на оси x не отображаются. Я хочу, чтобы было четыре тика, показывающих:

Mar 2018 — Mar 2019 — Mar 2020 — Mar 2021

Я пробовал использовать Дату.UTC, который не имеет изменений в позициях тиков, и на данных серии он ничего не отображает

Я также попытался использовать dateTimeLabelFormats dateTimeLabelFormats: { day: '%b %Y' } и форматирование даты метки, оба безрезультатно

 labels: {
  formatter: function () {
    return Highcharts.dateFormat('%b %Y', this.value);
  }
}

диаграмма

Как я могу отобразить метки дат по оси x?

Ответ №1:

Числа нужны в тиковых позициях, и новая дата («строка») не возвращает ее: https://jsfiddle.net/BlackLabel/e2gjqoty/

Также Дата.UTC работает медленно, поэтому индексация месяцев начинается с 0: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC

   xAxis: {
    type: "datetime",
    tickPositions: [
      Date.UTC(2018,02,01),
      Date.UTC(2019,02,01),
      Date.UTC(2020,02,01),
      Date.UTC(2021,02,01)
    ]
  }
Метки: