Несколько данных в категории в сплайн-графе

Question

Я хочу построить график, как на картинке ниже.

Поэтому я попытался вставить данные, как я их установил в гистограмму, ноэто не удалось.
Я использовал два метода.

Один.

// data: [YYYYMMDDhhmm, value]  
const sampleData = [[201906281815, 1], [201906281815, 4], [201906281815, 2], [201906281830, 10], [201906281830, 7], [201906281830, 15], [201906281845, 11], [201906281845, 8], [201906281845, 22]];
chart.series[0].setData(sampleData);

В первом случае график был нарисован, но данные в одном и том же часовом поясе перекрываются.
Время было успешно вставлено в xAxis.

Два.

// data: [YYYYMMDDhhmm, [value, value, value, value, ...]]  
const sampleData = [[201906281815, [1, 4, 2]], [201906281830, [10, 7, 15]], [201906281845, [11, 8, 22]]];
chart.series[0].setData(sampleData);

Время было правильно введено в xAxis, но сплайн не был нарисован.

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

Answer 1

Вы можете предварительно обработать ваши данные, чтобы вычислить точную x позицию на xAxis:

var sampleData = [
        [201906281815, 1],
        [201906281815, 4],
        [201906281830, 10],
        [201906281830, 7],
        [201906281830, 15],
        [201906281845, 11],
        [201906281845, 8],
        [201906281845, 22]
    ],
    repeated = 0,
    newData = [],
    xData = 0,
    yIndex = 0,
    step,
    j,
    categories = [];

sampleData.forEach(function(el, i) {
    if (sampleData[i + 1] && sampleData[i + 1][0] === el[0]) {
        repeated++
    } else {
        step = 1 / (repeated + 1);

        for (j = -0.5 + step / 2; j <= 0.5 - step / 2; j += step) {
            newData.push([
                xData + j,
                sampleData[yIndex][1]
            ]);

            yIndex++;
        }
        xData++;
        repeated = 0;
        categories.push(el[0]);
    }
});

Highcharts.chart('container', {
    series: [{
        data: newData
    }],
    xAxis: {
        categories: categories
    }
});

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