Блог

Мне нужно сделать гистограмму с несколькими диапазонами в одной строке.

Это пример из https://apexcharts.com/javascript-chart-demos/timeline-charts/advanced/ Моя проблема в том, что мне нужен Xaxis целочисленного типа, а не «дата-время», как в этом примере. Когда я изменяю тип оси на целочисленную диаграмму, она отображается не так, как я хочу, потому что для каждого диапазона будет создаваться новый столбец.

Это мой результат.

 var options = {
series: [
    {
        name: 'Bob',
        data: [
            {
                x: 'Design',
                y: [
                    4,9
                ]
            },
            {
                x: 'Code',
                y: [
                    5,7
                ]
            },
            {
                x: 'Code',
                y: [
                    0,1
                ]
            },
            {
                x: 'Test',
                y: [
                    9,10
                ]
            },
            {
                x: 'Test',
                y: [
                    4,7
                ]
            },
            {
                x: 'Validation',
                y: [
                    2,5
                ]
            },
            {
                x: 'Design',
                y: [
                    1,2
                ]
            }
        ]
    },
    {
        name: 'Joe',
        data: [
            {
                x: 'Design',
                y: [
                    1,2
                ]
            },
            {
                x: 'Test',
                y: [
                    4,6
                ]
            },
            {
                x: 'Code',
                y: [
                    7,9
                ]
            },
            {
                x: 'Deployment',
                y: [
                    1,5
                ]
            },
            {
                x: 'Design',
                y: [
                    4,7
                ]
            }
        ]
    },
    {
        name: 'Dan',
        data: [
            {
                x: 'Code',
                y: [
                    3,5
                ]
            },
            {
                x: 'Validation',
                y: [
                    2,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'
}
 

};

This is my code. In other words i need to have for example for ‘Bob’ in ‘Design’ two bars. One in range 1-2 and second in range 4-9. Can somebody help me? Is it even posible with apexcharts?