javascript - 样条图中某个类别中的多个数据

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

您可以预处理数据以计算 xAxis 上的准确 x 位置:

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/