Chart.js单分组时间线实现：上下栏颜色配置问题

要让绿色（ONLINE）条形显示在上方栏、黄色（IDLE）显示在下方栏，核心是取消Y轴的堆叠设置，并确保每个数据集对应独立的Y轴分类。以下是修改后的完整代码：

修改后的JavaScript代码 #

// 初始化配置
const labels = ["ONLINE", "IDLE"];
const data = {
    labels: labels,
    datasets: [
        {
            label: "ONLINE",
            data: [
                ["2022-01-01", "2022-01-02"],
                ["2022-01-03", "2022-01-04"],
            ],
            backgroundColor: "green",
            yAxisID: "y",
        },
        {
            label: "IDLE",
            data: [
                ["2022-01-02", "2022-01-03"],
                ["2022-01-04", "2022-01-05"],
            ],
            backgroundColor: "orange",
            yAxisID: "y",
        },
    ],
};

// 图表配置
const config = {
    type: "bar",
    data: data,
    options: {
        responsive: true,
        indexAxis: "y", // 横向条形图，Y轴为分类轴
        scales: {
            x: {
                min: "2022-01-01",
                type: "time",
                time: {
                    unit: "day",
                },
                ticks: {
                    display: true, // 显示X轴时间刻度，方便验证时间段
                },
            },
            y: {
                stacked: false, // 取消堆叠，让每个分类独立显示条形
                beginAtZero: true,
                ticks: {
                    font: {
                        size: 14,
                    },
                },
            },
        },
    },
};

// 渲染图表
const myChart = new Chart(document.getElementById("myChart"), config);

HTML代码 #

<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>

<div>
    <canvas id="myChart"></canvas>
</div>

关键修改说明 #

• 移除yAxes.stacked: true：堆叠会导致不同数据集的条形重叠在同一Y轴行，取消后每个数据集的条形会对应到专属Y轴分类行（ONLINE在上，IDLE在下）。
• 明确yAxisID：确保两个数据集共用同一Y轴，避免多轴混乱。
• 开启X轴刻度显示：方便直观查看时间区间是否匹配预期。

内容的提问来源于stack exchange，提问作者Ayato-Stack