如何为数据量较大的Chart.js柱状图添加滚动条

我基于Chart.js创建了包含24个月数据的柱状图，代码如下：

const labels = Utils.months({count: 24});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40, 30, 40, 5, 65, 59, 80, 81, 56, 55, 40, 30, 40, 5, 65, 59, 80, 81],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};

需求是给这个柱状图添加横向滚动条，但目前图表只会自动缩窄柱宽；尝试用CSS和JS实现滚动后，出现了网格宽度异常的问题，以下是解决方案：

解决步骤 #

1. 给图表添加滚动容器 #

给图表的canvas元素套一个外层容器，设置固定宽度和横向滚动：

.chart-container {
  width: 800px; /* 容器可视宽度，根据需求调整 */
  overflow-x: auto;
  height: 400px; /* 固定图表高度，避免滚动时高度变化 */
}

2. 配置Chart.js避免自动缩放 #

在图表配置中关闭宽高比自动调整，同时强制canvas的最小宽度，确保所有柱子完整显示：

const config = {
  type: 'bar',
  data: data,
  options: {
    maintainAspectRatio: false, // 关闭自动宽高比适配
    scales: {
      x: {
        grid: {
          drawOnChartArea: true, // 确保网格线正确绘制在图表区域内
        },
        ticks: {
          autoSkip: false, // 不自动隐藏X轴标签（可选，根据需求开启）
          maxRotation: 90, // 标签旋转90度避免重叠
          minRotation: 90
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
};

// 初始化图表时，设置canvas最小宽度（按柱子数量计算：每个柱子占60px，24个即24*60=1440px）
const ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.style.minWidth = `${24 * 60}px`;
new Chart(ctx, config);

3. 网格宽度异常的修复原理 #

之前的问题根源是：直接给容器加滚动时，Chart.js会根据容器的可视宽度自动缩放图表内容，导致网格线被压缩变形。通过设置canvas的最小宽度为所有柱子所需的总宽度，让图表内容保持完整尺寸，容器仅负责提供滚动视图，这样网格线会跟随完整的图表宽度渲染，不会出现变形。

内容的提问来源于stack exchange，提问作者Nirmala Kumar Sahu