Как получить Highcharts XAxis для отображения с двухминутными интервалами - PullRequest
Новая
       146

Как получить Highcharts XAxis для отображения с двухминутными интервалами

1 голос
/ 29 мая 2020

Я новичок в Highcharts и пытаюсь реализовать то, что, я уверен, можно сделать, но не могу понять.

Я разместил здесь свой jsfiddle: https://jsfiddle.net/dfeagin/1hn6c9ad/7/ Вот как выглядят данные в разделе моих категорий для этой оси: 

categories: ['1/20/2020 9:22:02 PM', '1/20/2020 9:22:03 PM', '1/20/2020 9:22:04 PM', '1/20/2020 9:22:08 PM', '1/20/2020 9:22:09 PM', '1/20/2020 9:22:10 PM', '1/20/2020 9:22:12 PM', '1/20/2020 9:22:14 PM', '1/20/2020 9:22:15 PM', '1/20/2020 9:22:16 PM', '1/20/2020 9:22:18 PM', '1/20/2020 9:22:19 PM'.....]

На оси XAxis, которая представляет минуты, всего 46 минут между временным интервалом от начала до конца. Я хочу показать двухминутные приращения и просто показать номер минуты в сравнении с отметкой даты / времени: 0 2 4 6 8 10 ..... 42 44 46

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

Еще одно примечание: я генерирую данные, которые загружаю в Highcharts, в веб-приложении. net, поэтому, если это помогает в ситуации, я могу отправить серию минутных чисел по сравнению с отметками времени / даты. Таким образом, я мог послать: 

categories: ['0', '0', '0', '1', '1', '2', '2', '2', '2', '2', '2', '2', '3', ... '43', '43', '43', '44', '44', '45', '45', '45', '45', '45', '45', '45', '46', '46']

1 Ответ

0 голосов
/ 30 мая 2020

Я думаю, вам лучше настроить диаграмму как сплайн, а не каждую серию, с осью x datetime и помещать данные в серию как массив пар дата / значение x / y.

Таким образом, вы можете иметь больший контроль над тиками xAxis, в этом случае устанавливая интервал тиков равным 2 минутам, и в целом он более гибкий.

Используйте настраиваемое средство форматирования для управления значением такта.

https://jsfiddle.net/gazx45oy/

Тип диаграммы: 

chart: {
  type: 'spline',

Настройки xAxis: 

xAxis: [{
type: 'datetime',
startOnTick: true,
minPadding: 0,
tickInterval: 120000, 
labels: {
    formatter: function () {
        return (this.value - this.axis.min) / 60000;
    },

Данные серии: 

var vesselSteamTemp = [
[Date.UTC(2020,20,1,9,22,2), 119],
...