如何绘制具有日期时间持续时间的 Highcharts 水平堆积条

Question

使用 Angular8 和 Highcharts

实际输入数据

[
        {
            name: 'Bar 1',
            open: [{from: 1649307600000, to: 1649307600000}],
            inprogress: [],
            done: [{from: 1649868600000, to: 1650085200000}],
        },
        {
            name: 'Bar 2',
            open: [{from: 1649307600000, to: 1649868600000}],
            inprogress: [],
            done: [{from: 1649868600000, to: 1650085200000}],
        },
        {
            name: 'Bar 3',
            open: [{from: 1649307600000, to: 1649868600000}],
            inprogress: [],
            done: [{from: 1649868600000, to: 1650085200000}],
        },
        {
            name: 'Bar 4',
            open: [
                {from: 1649307600000, to: 1649307600000},
                {from: 1649785500000, to: 1649867100000},
            ],
            inprogress: [
                {from: 1649782800000, to: 1649783100000},
                {from: 1649783400000, to: 1649783700000},
                {from: 1649867100000, to: 1649867400000},
            ],
            done: [
                {from: 1649783100000, to: 1649783400000},
                {from: 1649783700000, to: 1649785500000},
                {from: 1649867400000, to: 1650085200000},
            ],
        },
        {
            name: 'Bar 5',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
        {
            name: 'Bar 6',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
        {
            name: 'Bar 7',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
        {
            name: 'Bar 8',
            open: [
                {from: 1649433300000, to: 1649435100000},
                {from: 1649439000000, to: 1649439300000},
            ],
            inprogress: [
                {from: 1649433000000, to: 1649433300000},
                {from: 1649435100000, to: 1649435400000},
                {from: 1649439300000, to: 1649439600000},
            ],
            done: [
                {from: 1649307600000, to: 1649433000000},
                {from: 1649435400000, to: 1649439000000},
                {from: 1649439600000, to: 1650085200000},
            ],
        },
        {
            name: 'Bar 9',
            open: [],
            inprogress: [],
            done: [{from: 1649307600000, to: 1650085200000}],
        },
    ]

我想将标签绘制为日期（根据数据值形成给定的日期范围）。

根据 from 和 to[= 寻找日期范围 Open/In progress/Done 中的柱30=] 来自数据.

Highcharts.chart({
chart: {
    type: 'bar',
    renderTo: 'container',
},
title: {
    text: 'Horizontal stacked bar',
},
xAxis: {
    categories: ['Bar 1', 'Bar 2', 'Bar 3', 'Bar 4', 'Bar 5', 'Bar 6', 'Bar 7', 'Bar 8', 'Bar 9'],
},
yAxis: {
    min: //min of date value from data,
    max: //max of date value from data,
    type: 'datetime',
    labels: {
        overflow: 'justify',
        formatter: function() {
            console.log(this.value);

            const dd = new Date(Number(this.value) + min value);

            return `${dd.getDate()}-${dd.getMonth() + 1}-${dd.getFullYear()}`;
        },
    },
   
},
tooltip: {
    formatter: function() {
        return this.series.name;
    },
},
plotOptions: {
    series: {
        stacking: 'normal',
    },
},
series: [
    {
        name: 'Open',
        type: 'bar',
        data: [
            1649307600000,
            1649868600000,
            1649868600000,
            1649307600000,
            1650085200000,
            1650085200000,
            1650085200000,
            1649435100000,
            1650085200000,
        ],
        color: 'red',
    },
    {
        name: 'In Progress',
        type: 'bar',
        data: [
            1649307600000,
            1649868600000,
            1649868600000,
            1649783100000,
            1650085200000,
            1650085200000,
            1650085200000,
            1649433300000,
            1650085200000,
        ],
        color: 'yellow',
    },
    {
        name: 'Done',
        type: 'bar',
        data: [
            1650085200000,
            1650085200000,
            1650085200000,
            1649783400000,
            1650085200000,
            1650085200000,
            1650085200000,
            1649433000000,
            1650085200000,
        ],
        color: 'green',
    },

    {
        name: 'Open',
        type: 'bar',
        data: [0, 0, 0, 1649867100000, 0, 0, 0, 1649439300000, 0],
        color: 'red',
        showInLegend: false,
    },

    {
        name: 'In Progress',
        type: 'bar',
        data: [0, 0, 0, 1649783700000, 0, 0, 0, 1649435400000, 0],
        color: 'yellow',
        showInLegend: false,
    },
    {
        name: 'In Progress',
        type: 'bar',
        data: [0, 0, 0, 1649867400000, 0, 0, 0, 1649439600000, 0],
        color: 'yellow',
        showInLegend: false,
    },

    {
        name: 'Done',
        type: 'bar',
        data: [0, 0, 0, 1649785500000, 0, 0, 0, 1649439000000, 0],
        color: 'green',
        showInLegend: false,
    },
    {
        name: 'Done',
        type: 'bar',
        data: [0, 0, 0, 1650085200000, 0, 0, 0, 1650085200000, 0],
        color: 'green',
        showInLegend: false,
    },
],
});

用上面的代码得到下面的图表

注：在上图中。 Y 轴标签（日期）未按预期工作。 也有不在给定日期范围内的酒吧

Answer 1

我建议使用 xrange (https://www.highcharts.com/demo/x-range) 系列类型而不是堆叠条形系列。

如您在此示例中所见：http://jsfiddle.net/BlackLabel/x67rbnoh - 时间戳是堆叠的，因此您必须根据前一个时间戳计算 y 值。