HighCharts, играющие с YAxis & TimeStamps

Question

Мне нужно будет отображать объекты (двойная диаграмма для каждого объекта).Структура объекта:

{
dates: (5) ["2018-12-26", "2018-12-27", "2018-12-28", "2018-12-31", "2019-01-02"]

formattedDates: (5) ["2018/12/26", "2018/12/27", "2018/12/28", "2018/12/31", "2019/01/02"]

formatPoints2: (5) [1545945000000, 1546026562061, 1546284847056, 1546465543023, 1546545993086]

points: (5) ["2018-12-27T10:36:24.893", "2018-12-28T17:29:56.517", "2018-12-31T05:48:41.587", "2019-01-01T10:10:09.683", "2019-01-03T10:36:42.002"]

points2: (5) ["2018-12-27T16:10", "2018-12-28T14:49:22.061", "2018-12-31T14:34:07.056", "2019-01-02T16:45:43.023", "2019-01-03T15:06:33.086"]

formatPoints: (5) [1545924984893, 1546036196517, 1546253321587, 1546355409683, 1546529802002]
}

Я позволил себе преобразовать массив точек и точек 2, используя date.getTime (), чтобы получить formatPoints и formatPoints2

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

e.g. points[0] = 2018-12-27T10:36:24.893, dates[0] = 2018-12-26
plot 10:36:24 vs 2018-12-26 and so on for each time in the array

дополнительный улов, мне нужно отобразить полную метку времени в подсказке (2018-12-27T10: 36: 24.893) на графике при наведении курсора на столбец для этой точки

график представляет собой двойной столбчатый график, на котором точки и точки2 отображаются относительно дат.

Answer 1

В вашем случае ключом является установка правильных типов осей.Для значений отметки времени на yAxis лучшим типом будет datetime, а для дат на xAxis - category.Пожалуйста, проверьте пример ниже и дайте мне знать, если все в порядке.

var series = [{data: []}, {data: []}];

data.points.forEach(function(point, i){
    series[0].data.push({
        name: data.formattedDates[i],
        tooltipText: data.points[i],
        y: data.formatPoints[i]
    });

    series[1].data.push({
        name: data.formattedDates[i],
        tooltipText: data.points2[i],
        y: data.formatPoints2[i]
    });
});

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    xAxis: {
        type: 'category'
    },
    tooltip: {
        pointFormat: '{point.tooltipText}'
    },
    yAxis: {
        min: 1545945000000,
        max: 1546529802002,
        type: 'datetime'
    },
    series: series
});

Демонстрационная версия: http://jsfiddle.net/BlackLabel/asm64f5r/

API: https://api.highcharts.com/highcharts/xAxis.type