Chart.js水平条形图与Y轴标签对齐问题求助

问题概述 #

需要实现的Chart.js水平条形图具备以下特性：

• X轴为时间轴
• 每行（Y轴分类）显示多个独立条形
• 自定义条形背景色
• 自定义Tooltip内容
  核心问题：条形与左侧Y轴标签无法垂直对齐

问题根源 #

1. 缺失Y轴分类标签配置：第二段代码注释掉了labels数组，Chart.js无法明确Y轴的分类顺序和位置，自动生成的Y轴标签位置与数据的y值映射出现偏差。
2. 布局配置位置错误：barPercentage和categoryPercentage配置在每个数据集上，导致不同数据集的条形布局计算逻辑不一致。
3. Y轴类型未明确：未指定Y轴类型为category，Chart.js默认的分类轴逻辑未正确触发，导致对齐异常。

修复方案 #

1. 恢复并同步Y轴标签：在data中添加labels数组，确保数组中的值与所有数据项的y值完全匹配，明确Y轴分类顺序。
2. 统一布局配置：将barPercentage和categoryPercentage移至options.scales.y配置中，全局控制每个分类下的条形宽度和间距。
3. 明确Y轴配置：指定Y轴类型为category，关闭beginAtZero（分类轴无需此属性），开启align: 'center'确保标签与条形垂直居中对齐。
4. 修正Tooltip回调：确保Tooltip能正确读取自定义的tooltip字段，避免无意义的错误。

修复后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
    * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
    }

    .chartMenu {
        width: 100vw;
        height: 40px;
        background: #1A1A1A;
        color: rgba(54, 162, 235, 1);
      }

      .chartMenu p {
        padding: 10px;
        font-size: 20px;
      }

      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(54, 162, 235, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(54, 162, 235, 1);
        background: white;
      }
</style>

<div class="container">
    <div class="col-12 mt-3 mb-3">
      <canvas id="log_chart" width="600" height="200"></canvas>
    </div>
</div>

<script>
    // config 
    const config = {
        type: 'bar',
        data: {
            labels: ['Test1', 'Test2', 'Test3'], // 与数据中y值完全匹配
            datasets: [{
                backgroundColor: 'rgba(64, 224, 208, 255)',
                borderColor: 'rgba(64, 224, 208, 255)',
                data: [{
                    y: 'Test1',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:06:02'],
                    tooltip: 'Tooltip1'
                }, {
                    y: 'Test1',
                    x: ['2022-09-29T16:18:00', '2022-09-29T16:25:10'],
                    tooltip: 'Tooltip2'
                }, {
                    y: 'Test1',
                    x: ['2022-09-29T16:31:00', '2022-09-29T16:50:02'],
                    tooltip: 'Tooltip3'
                }]
            }, {
                backgroundColor: 'rgba(100, 149, 237, 255)',
                borderColor: 'rgba(100, 149, 237, 255)',
                borderWidth: 0,
                data: [{
                    y: 'Test2',
                    x: [ '2022-09-29T16:03:03', '2022-09-29T16:13:06' ],
                    tooltip: 'Tooltip4'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:16:03', '2022-09-29T16:30:06' ],
                    tooltip: 'Tooltip5'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:35:51', '2022-09-29T16:48:54' ],
                    tooltip: 'Tooltip6'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:49:51', '2022-09-29T16:58:54' ],
                    tooltip: 'Tooltip7'
                }, {
                    y: 'Test2',
                    x: [ '2022-09-29T16:20:37', '2022-09-29T16:20:40' ],
                    tooltip: 'Tooltip8'
                }]
            }, {
                backgroundColor: 'rgba(143, 188, 139, 255)',
                borderColor: 'rgba( 64, 224, 208, 255)',
                data: [{
                    y: 'Test3',
                    x: ['2022-09-29T16:00:00', '2022-09-29T16:05:02'],
                    tooltip: 'Tooltip9'
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:12:00', '2022-09-29T16:30:10'],
                    tooltip: 'Tooltip10'
                }, {
                    y: 'Test3',
                    x: ['2022-09-29T16:40:00', '2022-09-29T16:55:48'],
                    tooltip: 'Tooltip11'
                }]
            }]
        },
        options: {
            animation: false,
            indexAxis: 'y',
            scales: {
                x: {
                    type: 'time',
                    stacked: true,
                    time: {
                        unit: 'minute'
                    },
                    min: new Date('2022-09-29T16:00:00'),
                    max: new Date('2022-09-29T16:45:00'),
                    ticks: {
                        padding: 70,
                        minRotation: -90,
                        maxRotation: -90
                    }
                },
                y: {
                    type: 'category', // 明确分类轴类型
                    align: 'center', // 标签与条形居中对齐
                    barPercentage: 0.8,
                    categoryPercentage: 1,
                    beginAtZero: false // 分类轴不需要此属性
                }
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    yAlign: 'bottom',
                    callbacks: {
                        label: (context) => {
                            return context.dataset.data[context.dataIndex].tooltip;
                        }
                    }
                }
            }
        }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('log_chart'),
      config
    );
</script>

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