Chart.js 4.1.1能否实现睡眠追踪阶梯折线图？数据配置求助

Chart.js 4.1.1完全可以生成你需要的Y轴为睡眠阶段标签、X轴为数值数据的横向图表，问题出在数据格式与图表配置不匹配。

核心配置思路 #

设置indexAxis: 'y'后，图表会转为横向模式：

• Y轴作为分类轴，对应睡眠阶段标签（如清醒、浅睡眠、深睡眠、REM）
• X轴作为数值轴，对应每个阶段的时长或量化数据
• 数据集需按Y轴标签的顺序，依次传入对应的X轴数值

完整可运行代码示例 #

<canvas id="sleepChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.1.1/dist/chart.umd.js"></script>
<script>
const ctx = document.getElementById('sleepChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        // Y轴的睡眠阶段标签
        labels: ['清醒', '浅睡眠', '深睡眠', 'REM'],
        datasets: [{
            label: '睡眠时长（分钟）',
            // 对应每个Y轴标签的X轴数值（按顺序匹配）
            data: [30, 120, 90, 60],
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        indexAxis: 'y', // 关键：开启横向模式
        scales: {
            x: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: '时长（分钟）'
                }
            },
            y: {
                title: {
                    display: true,
                    text: '睡眠阶段'
                }
            }
        }
    }
});
</script>

你的数据集格式问题分析 #

• 第一种格式{x: 10, y: 20}：横向条形图无需这种对象格式，直接按Y轴标签顺序传数值即可；若用对象格式，需写成{x: 数值, y: 标签索引}，但远不如labels数组直观。
• 第二种格式{x: 'awake', y: 20}：X轴是数值轴，不能传入字符串，且搞反了X/Y的对应关系。
• 第三种格式{'data.key': 'one', 'data.value': 20}：Chart.js不识别这种自定义键名，必须使用标准数据结构。

进阶：展示睡眠阶段时间区间 #

如果需求是展示每个阶段的时间范围（X轴为时间），可使用横向条形图配合时间轴，数据格式改为{x: 开始时间, x2: 结束时间, y: 阶段标签}：

data: {
    labels: ['清醒', '浅睡眠', '深睡眠', 'REM'],
    datasets: [{
        label: '睡眠时间段',
        data: [
            {x: '22:00', x2: '22:30', y: '清醒'},
            {x: '22:30', x2: '00:30', y: '浅睡眠'},
            {x: '00:30', x2: '02:00', y: '深睡眠'},
            {x: '02:00', x2: '03:00', y: 'REM'}
        ],
        backgroundColor: [...],
        borderColor: [...]
    }]
},
options: {
    indexAxis: 'y',
    scales: {
        x: {
            type: 'time',
            time: {
                unit: 'hour',
                displayFormats: {hour: 'HH:mm'}
            }
        }
    }
}

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