有没有办法在同一行中创建具有多个范围的条形图？

如何解决有没有办法在同一行中创建具有多个范围的条形图？

我需要在同一行中制作具有多个范围的条形图。

这是来自 https://apexcharts.com/javascript-chart-demos/timeline-charts/advanced/ 的示例 我的问题是我需要整数类型的 Xaxis，而不是本例中的“日期时间”。当我将 Xaxis 类型更改为整数时，图表不会按我想要的方式显示，因为将为每个范围创建新列。

这是我的输出。

var options = {
series: [
    {
        name: 'Bob',data: [
            {
                x: 'Design',y: [
                    4,9
                ]
            },{
                x: 'Code',y: [
                    5,7
                ]
            },y: [
                    0,1
                ]
            },{
                x: 'Test',y: [
                    9,10
                ]
            },{
                x: 'Validation',y: [
                    2,5
                ]
            },{
                x: 'Design',y: [
                    1,2
                ]
            }
        ]
    },{
        name: 'Joe',2
                ]
            },6
                ]
            },y: [
                    7,{
                x: 'Deployment',7
                ]
            }
        ]
    },{
        name: 'Dan',data: [
            {
                x: 'Code',y: [
                    3,3
                ]
            },]
    }
],chart: {
    height: 450,type: 'rangeBar'
},plotOptions: {
    bar: {
        horizontal: true,barHeight: '80%'
    }
},xaxis: {
    min: 0,max: 10
},stroke: {
    width: 1
},fill: {
    type: 'solid',opacity: 0.6
},legend: {
    position: 'top',horizontalAlign: 'left'
}

};

这是我的代码。换句话说，我需要例如“设计”中的“鲍勃”两个小节。一个在 1-2 范围内，第二个在 4-9 范围内。有人可以帮助我吗？它甚至可以与 apexcharts 一起使用吗？