Chart.js 在堆叠栏中显示状态随时间的变化

Question

我的数据库中有许多记录，其状态更改已经过审核。我将这些数据拉出并显示在 Chart.js 水平条形图中，以可视化每条记录处于每种状态的持续时间。

我使用以下带有虚拟数据的代码来确定如何格式化数据库数据：

var myChart = new Chart(chartCtx, {
            type: 'bar',
            data: {
                labels: ['Record1', 'Record2', 'Record3', 'Record4', 'Record5'],
                datasets: [{
                    label: 'Open',
                    data: [
                        { x: '2024-02-01', y: 0, x2: '2024-02-04' },
                        { x: '2024-02-01', y: 1, x2: '2024-02-03' },
                        { x: '2024-02-01', y: 2, x2: '2024-02-02' },
                        { x: '2024-02-01', y: 3, x2: '2024-02-02' },
                        { x: '2024-02-04', y: 3, x2: '2024-02-10' },
                        { x: '2024-02-04', y: 4, x2: '2024-02-05' }
                    ],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Under Review',
                    data: [
                        { x: '2024-02-04', y: 0, x2: '2024-02-07' },
                        { x: '2024-02-03', y: 1, x2: '2024-02-04' },
                        { x: '2024-02-02', y: 2, x2: '2024-02-08' },
                        { x: '2024-02-05', y: 4, x2: '2024-02-06' }
                    ],
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Closed',
                    data: [
                        { x: '2024-02-07', y: 0, x2: '2024-02-10' },
                        { x: '2024-02-04', y: 1, x2: '2024-02-10' },
                        { x: '2024-02-08', y: 2, x2: '2024-02-10' },
                        { x: '2024-02-02', y: 3, x2: '2024-02-07' },
                        { x: '2024-02-01', y: 4, x2: '2024-02-04' },
                        { x: '2024-02-06', y: 4, x2: '2024-02-10' }
                    ],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                indexAxis: 'y',
                scales: {
                    x: {
                        stacked: true,
                        ticks: {
                            beginAtZero: true
                        },
                        type: 'time',
                        time: {
                            unit: 'day'
                        },
                        min: '2024-01-31',
                        max: '2024-02-10'
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });

由于某种原因，图表未正确堆叠，并且值似乎也在错误的点开始/结束。

我不确定我是否使用正确的数据格式来使用范围构建图表。我认为 Y 值被用作数据的高度而不是索引它。

任何有助于找出正确数据结构的帮助将不胜感激。

干杯，

杰米

Answer 1

我不是 100% 确定你想要达到的确切结果是什么，但我认为你想要的是“浮动”条，请参阅示例 在文档中。这样你就可以固定每个条的底部和末端。否则，使用浮动栏，当您禁用数据集时， 其他人自然会向左“塌陷”。

对于“浮动”条形图，数据点可能如下所示：

{x: ['2024-02-06', '2024-02-10'], y: 0}

这是数据更改的代码，

stacked: true

从x轴上删除，加上

borderSkipped: false

选项可以在所有边上绘制边框。

var myChart = new Chart('myChart', {
    type: 'bar',
    data: {
        labels: ['Record1', 'Record2', 'Record3', 'Record4', 'Record5'],
        datasets: [{
            label: 'Open',
            data: [
                {x: '2024-02-01', y: 0, x2: '2024-02-04'},
                {x: '2024-02-01', y: 1, x2: '2024-02-03'},
                {x: '2024-02-01', y: 2, x2: '2024-02-02'},
                {x: '2024-02-01', y: 3, x2: '2024-02-02'},
                {x: '2024-02-04', y: 3, x2: '2024-02-10'},
                {x: '2024-02-04', y: 4, x2: '2024-02-05'}
            ].map(({x, x2, y}) => ({x: [x, x2], y})),
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            borderSkipped: false
        },
            {
                label: 'Under Review',
                data: [
                    {x: '2024-02-04', y: 0, x2: '2024-02-07'},
                    {x: '2024-02-03', y: 1, x2: '2024-02-04'},
                    {x: '2024-02-02', y: 2, x2: '2024-02-08'},
                    {x: '2024-02-05', y: 4, x2: '2024-02-06'}
                ].map(({x, x2, y}) => ({x: [x, x2], y})),
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
                borderSkipped: false
            },
            {
                label: 'Closed',
                data: [
                    {x: '2024-02-07', y: 0, x2: '2024-02-10'},
                    {x: '2024-02-04', y: 1, x2: '2024-02-10'},
                    {x: '2024-02-08', y: 2, x2: '2024-02-10'},
                    {x: '2024-02-02', y: 3, x2: '2024-02-07'},
                    {x: '2024-02-01', y: 4, x2: '2024-02-04'},
                    {x: '2024-02-06', y: 4, x2: '2024-02-10'}
                ].map(({x, x2, y}) => ({x: [x, x2], y})),
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                borderSkipped: false
            }]
    },
    options: {
        indexAxis: 'y',
        scales: {
            x: {
                //stacked: true,
                ticks: {
                    beginAtZero: true
                },
                type: 'time',
                time: {
                    unit: 'day'
                },
                min: '2024-01-31',
                max: '2024-02-10'
            },
            y: {
                stacked: true
            }
        }
    }
});

<div style="min-height: 60vh">
    <canvas id="myChart">
    </canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

当然，您可以将所有数据集共有的选项分解到

options

部分。