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/

样条图中一个类别中的多个数据

1 个答案: