使用Chart.js堆叠水平条形图展示记录状态时长异常排查

你用的x/x2/y数据格式不是Chart.js条形图的标准格式，条形图默认将y值当作数值而非y轴索引，这直接导致堆叠和位置混乱。要实现每条记录的状态时长可视化，需要调整数据结构和配置逻辑：

1. 数据结构调整 #

每个状态对应一个dataset，data数组的索引与y轴的记录一一对应（Record1对应索引0，Record2对应索引1，以此类推）。每个数据元素是包含x（状态开始时间）和width（状态持续时长，单位毫秒）的对象，替代你原本的范围格式。

2. 关键配置修改 #

• 关闭stacked配置（我们要的是状态按时间顺序排列，而非数值堆叠）
• 固定barThickness确保同一条记录的各状态条形高度一致，避免重叠
• 自定义tooltip显示状态的起止日期，提升可读性

完整修正代码 #

// 工具函数：计算两个日期的毫秒差
const getDurationMs = (start, end) => new Date(end) - new Date(start);

var myChart = new Chart(chartCtx, {
    type: 'bar',
    data: {
        labels: ['Record1', 'Record2', 'Record3', 'Record4', 'Record5'],
        datasets: [
            {
                label: 'Open',
                data: [
                    { x: '2024-02-01', width: getDurationMs('2024-02-01', '2024-02-04') },
                    { x: '2024-02-01', width: getDurationMs('2024-02-01', '2024-02-03') },
                    { x: '2024-02-01', width: getDurationMs('2024-02-01', '2024-02-02') },
                    { x: '2024-02-01', width: getDurationMs('2024-02-01', '2024-02-02') },
                    { x: '2024-02-04', width: getDurationMs('2024-02-04', '2024-02-05') }
                ],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1,
                barThickness: 20
            },
            {
                label: 'Under Review',
                data: [
                    { x: '2024-02-04', width: getDurationMs('2024-02-04', '2024-02-07') },
                    { x: '2024-02-03', width: getDurationMs('2024-02-03', '2024-02-04') },
                    { x: '2024-02-02', width: getDurationMs('2024-02-02', '2024-02-08') },
                    { x: null, width: 0 }, // Record4无此状态，占位处理
                    { x: '2024-02-05', width: getDurationMs('2024-02-05', '2024-02-06') }
                ],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
                barThickness: 20
            },
            {
                label: 'Closed',
                data: [
                    { x: '2024-02-07', width: getDurationMs('2024-02-07', '2024-02-10') },
                    { x: '2024-02-04', width: getDurationMs('2024-02-04', '2024-02-10') },
                    { x: '2024-02-08', width: getDurationMs('2024-02-08', '2024-02-10') },
                    { x: '2024-02-02', width: getDurationMs('2024-02-02', '2024-02-07') },
                    { x: '2024-02-06', width: getDurationMs('2024-02-06', '2024-02-10') }
                ],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                barThickness: 20
            }
        ]
    },
    options: {
        indexAxis: 'y', // 切换为水平条形图
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'day',
                    tooltipFormat: 'YYYY-MM-DD'
                },
                min: '2024-01-31',
                max: '2024-02-10',
                position: 'bottom'
            },
            y: {
                type: 'category'
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const startDate = new Date(context.raw.x).toLocaleDateString();
                        const endDate = new Date(new Date(context.raw.x) + context.raw.width).toLocaleDateString();
                        return `${context.dataset.label}: ${startDate} - ${endDate}`;
                    }
                }
            }
        }
    }
});

核心注意点 #

• 每个dataset的data数组长度必须与y轴标签数量一致，无对应状态的记录需用{x: null, width: 0}占位
• width必须是毫秒数，Chart.js会自动将其转换为时间轴上的长度
• 若需要强制状态连续无间隙堆叠，需确保每个状态的x值等于前一个状态的结束时间，同时开启scales.x.stacked和scales.y.stacked

内容的提问来源于stack exchange，提问作者bowfinger