如何在Chart.js水平条形图中固定条形间距并调整Y轴长度？

需求说明 #

要实现水平条形图的两个核心效果：

• 固定Y轴类别（条形组）之间的间距为指定数值
• 类别数量增加时，自动延长Y轴长度，保持每个类别的高度和间距恒定
  此前尝试通过afterFit方法修改刻度高度未生效，以下是可行实现方案。

解决方案 #

核心思路是动态计算图表容器高度，配合Chart.js的内置配置固定条形高度与类别间距：

1. 预设单个条形的固定高度（barThickness）和类别间的固定间距（categorySpacing）
2. 根据类别总数计算图表容器所需的总高度
3. 将容器高度设置为计算值，关闭图表的宽高比例锁定，确保高度生效

修改后的完整代码 #

HTML 部分

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

JavaScript 部分

// 生成测试数据
const labelCount = 500;
const labels = Array.from({length: labelCount}, (_, i) => `Category ${i+1}`);
const data1 = Array.from({length: labelCount}, (_, i) => (i+1)*10);
const data2 = Array.from({length: labelCount}, (_, i) => (i+1)*3);

// 配置固定参数
const barHeight = 20; // 单个条形的固定高度（px）
const categoryGap = 10; // 类别之间的固定间距（px）
const chartPadding = 40; // 图表上下内边距总和（px）

// 计算容器总高度
const totalHeight = (barHeight + categoryGap) * labelCount + chartPadding;
const ctx = document.getElementById('myChart');
// 设置容器高度
ctx.style.height = `${totalHeight}px`;

const data = {
  labels: labels,
  datasets: [{
    label: 'Bar 1',
    data: data1,
    backgroundColor: 'rgba(100, 149, 237, 0.25)',
    barThickness: barHeight, // 固定条形高度
    categoryPercentage: 1 // 让条形占满类别组高度
  }, {
    label: 'Bar 2',
    data: data2,
    backgroundColor: 'rgba(100, 149, 237, 0.8)',
    barThickness: barHeight, // 固定条形高度
    categoryPercentage: 1
  }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false, // 关闭宽高比例锁定，允许自定义高度
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true,
        position: 'top'
      },
      y: {
        beginAtZero: true,
        categorySpacing: categoryGap // 固定类别间间距
      }
    },
    plugins: {
      legend: {
        display: true
      },
      layout: {
        padding: {
          left: 20,
          right: 20,
          top: 20,
          bottom: 20
        }
      }
    }
  }
};

new Chart(ctx, config);

关键配置说明 #

• barThickness: 直接设定单个条形的固定高度，避免图表自适应压缩条形
• categorySpacing: 设定Y轴上不同类别组之间的固定间距
• 动态计算容器高度：确保所有类别能完整展示，不会因数量过多导致挤在一起
• maintainAspectRatio: false: 必须开启，否则图表会强制保持默认宽高比，自定义高度不生效

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