Highcharts: Как представить время дня на оси x в формате ЧЧ: ММ: СС?

Question

У меня есть таблица в этой форме

Time        FR    IT     DE
00:00:09    1     2      12
00:00:18    1     0      0
00:00:28    1     3      11

Я пытаюсь построить эти данные с использованием старших графиков.Вот мой конфиг

data = {
    "title": {
        "text": "Concurrency"
    },
    "yAxis": {
        "title": {
            "text": "Number of Employees"
        }
    },
    "legend": {
        "layout": "vertical",
        "align": "right",
        "verticalAlign": "middle"
    },
    "series": [
        {
            "name": "FR",
            "data": data_fr
        },
        {
            "name": "IT",
            "data": data_it
        },
        {
            "name": "DE",
            "data": data_de
        }
    ],
}

Поле времени представляет время дня в HH:MM:SS для одного дня.А остальные столбцы - это данные серии, которые мне нужно отобразить на оси Y в виде линейных диаграмм.Теперь количество строк в этой таблице довольно большое, около 5000. Я хочу построить время на оси x, но я не хочу показывать каждую запись.Я хочу показать только часы на оси х.Например, 1, 2, 3 и т. Д., Хотя в столбце Time содержится так много записей времени.Как я могу сделать это?

Кроме того, есть ли способ, которым я могу сгладить свои линейные графики?Потому что с таким количеством значений у графа много острых граней.

Answer 1

Мне пришлось изменить время от строки до поля метки времени (миллисекунды от эпохи).Сделав это, я смог предоставить опцию конфигурации:

"xAxis": {
    "type": "datetime"
}

С этим конфигом Highcharts автоматически позаботился о беспорядке с оси x.Он показывал метки на оси х через равные промежутки времени, например, с интервалом 2 часа

Еще одно сомнение, которое у меня возникло, заключалось в том, как обеспечить данные ряда значениями осей x и y.Ранее я предоставлял только значения оси y, как это:

"series": [
    {
        "name": "CC_FR",
        "data": [10, 23, 11]
    },

Мне пришлось изменить массив data с массива чисел на массив объектов с каждым объектом, имеющим ключи x и y иценности.Например:

"series": [
    {
        "name": "CC_FR",
        "data": [
          { "x": 1528210784424 ,"y": 10 },
          { "x": 1528210803102 ,"y": 23 },
          { "x": 1528210810702 ,"y": 11 }
        ],
        "turboThreshold": 0
    },

В моем случае "turboThreshold": 0 был необходим, потому что длина массива data была больше 1000. Я также добавил опцию конфигурации:

"chart": {
   "zoomType": 'x'
},

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