Chart.js柱状图屏幕尺寸过小时重叠问题求解

1. 用barPercentage和categoryPercentage精准控制柱子宽度与间距 #

这两个是Chart.js专门用于调整柱状图布局的核心配置，比白色边框的方式更可控：

• barPercentage：控制单组内单根柱子的宽度占该组可用空间的比例（取值0-1），数值越小柱子越窄
• categoryPercentage：控制每组柱子整体占分类宽度的比例（取值0-1），数值越小组与组之间的间距越大

示例配置代码：

options: {
  maintainAspectRatio: false,
  scales: {
    x: {
      barPercentage: 0.6,
      categoryPercentage: 0.8
    }
  }
}

还可以监听窗口resize事件，在小屏时动态调低这两个值，进一步避免重叠。

2. 小屏时动态提升图表容器高度 #

既然你只希望图表在宽度方向收缩，可在屏幕变窄时适当增加容器高度，给柱子留出足够横向空间：

• CSS媒体查询方式：

@media (max-width: 768px) {
  .chart-container {
    height: 400px !important;
  }
}

• JS监听resize事件方式：

window.addEventListener('resize', () => {
  const container = document.querySelector('.chart-container');
  container.style.height = window.innerWidth < 768 ? '400px' : '300px';
});

3. 优化X轴标签布局释放空间 #

如果X轴标签过长，会挤压柱子的横向空间，可配置标签自动调整：

options: {
  scales: {
    x: {
      ticks: {
        maxRotation: 45, // 标签最大旋转角度
        autoSkip: true, // 自动跳过部分标签
        maxTicksLimit: 8 // 限制最多显示的标签数量
      }
    }
  }
}

4. 响应式多断点配置 #

结合Chart.js的响应式断点功能，针对不同屏幕尺寸设置差异化的柱子参数：

options: {
  maintainAspectRatio: false,
  responsive: true,
  breakpoints: {
    768: {
      scales: {
        x: {
          barPercentage: 0.5,
          categoryPercentage: 0.7
        }
      }
    },
    1200: {
      scales: {
        x: {
          barPercentage: 0.7,
          categoryPercentage: 0.9
        }
      }
    }
  }
}

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