如何解决react-chartjs-2柱状图重叠问题并实现横向滚动

当柱状图数据量较大（如200个数据点）时，默认响应式布局会导致柱子挤压重叠，通过以下步骤实现横向滚动并解决重叠：

1. 修改容器布局，实现横向滚动 #

给图表外层容器添加横向滚动属性，同时为图表内层容器设置动态最小宽度，确保每个柱子有足够显示空间：

export default function FooterCpu() {
  // 根据数据量计算最小宽度，每个柱子预留15px（含间距），可按需调整
  const chartMinWidth = labels.length * 15;
  return (
    <div className='max-h-[160px] overflow-x-auto'>
      <div style={{ minWidth: `${chartMinWidth}px`, paddingBottom: '10px' }}>
        <Bar className='myChart' options={options} data={data} />
      </div>
    </div>
  );
}

2. 调整Chart配置，优化轴显示 #

修正并调整x轴配置，避免标签重叠，同时确保图表不被过度压缩：

export const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false,
    },
  },
  scales: {
    x: {
      beginAtZero: true, // 修正为布尔值，确保y轴从0开始
      autoSkip: false, // 不自动跳过标签（可选，按需开启）
      maxRotation: 90, // 标签旋转90度，避免重叠
      minRotation: 90,
      grid: {
        offset: false,
      },
    },
    y: {
      beginAtZero: true,
    },
  },
};

3. 可选：调整柱子样式 #

如果仍需优化柱子间距或宽度，可修改数据集的barThickness、barPercentage参数：

datasets: [
  {
    // ... 其他配置
    barThickness: 8, // 柱子固定宽度
    barPercentage: 0.6, // 柱子占可用宽度的比例，可按需调整
  },
]

关键说明 #

• 外层容器的overflow-x-auto触发横向滚动，内层容器的minWidth确保图表有足够宽度展示所有柱子，避免挤压重叠。
• x轴的旋转设置可避免标签重叠，若不需要显示x轴标签，可直接设置scales.x.display: false隐藏。

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