使用Angular 8和 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，查找日期范围“打开”/“进行中”/“完成”中的棒线。*

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,
    },
],
});

用上面的代码得到下面的图表x1c 0d1x
注意：在上图中。Y轴标签（日期）未按预期工作。还有不在给定日期范围内的条形图