Chart.js堆叠条形图垂直滚动时X轴固定及视觉Bug排查

1. 实现垂直滚动时X轴固定的布局 #

用外层容器包裹图表，通过CSS限制容器高度并开启垂直滚动，配合Chart.js配置让图表自适应容器，确保X轴在滚动时保持可见：

• 容器CSS：

.chart-container {
  width: 90%; /* 根据需求调整宽度 */
  max-height: 450px; /* 限制高度触发滚动 */
  overflow-y: auto;
  position: relative;
}

• 图表核心配置：

options: {
  responsive: true,
  maintainAspectRatio: false, // 关闭宽高比锁定，让图表填满容器
  indexAxis: 'x', // 垂直堆叠条形图用此配置；水平堆叠则改为'y'
  scales: {
    x: {
      stacked: true,
      position: 'top' // 将X轴放在顶部，滚动时更易保持视野内
    },
    y: {
      stacked: true
    }
  }
}

2. 修复responsive: true渲染失败问题 #

设置responsive: true时，必须保证父容器有明确尺寸，同时开启maintainAspectRatio: false让图表自适应容器高度，避免渲染异常：

• 移除canvas标签上硬编码的width/height属性
• 确保父容器有基础尺寸（如上述CSS中的宽度和最大高度）

3. 解决硬编码宽高仅显示首尾数据集的问题 #

硬编码宽高会挤压图表空间，导致中间条形被隐藏。改用「容器自适应+Chart.js响应式配置」，让图表根据容器高度自动分配每个条形的显示空间，确保所有数据集完整展示：

• 彻底移除硬编码的宽高值
• 保持maintainAspectRatio: false配置，让图表高度随容器滚动区域自适应

4. 移除左上角奇怪视觉元素 #

该元素多为Chart.js默认图例或容器样式残留，可通过以下方式解决：

• 关闭或调整图例位置：

options: {
  plugins: {
    legend: {
      display: false, // 不需要图例直接关闭
      // 或调整位置避免干扰
      position: 'bottom'
    }
  }
}

• 检查容器CSS，移除可能产生视觉残留的padding/margin或伪元素（如:before/:after）

完整可运行示例 #

<div class="chart-container">
  <canvas id="stackedBarChart"></canvas>
</div>

<style>
.chart-container {
  width: 90%;
  max-height: 450px;
  overflow-y: auto;
  margin: 20px auto;
  border: 1px solid #eee;
}
</style>

<script>
const ctx = document.getElementById('stackedBarChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['类别1', '类别2', '类别3', '类别4', '类别5', '类别6', '类别7', '类别8', '类别9'],
    datasets: [
      {
        label: '数据集A',
        data: [12, 19, 3, 5, 2, 3, 7, 11, 8],
        backgroundColor: 'rgba(255, 99, 132, 0.6)'
      },
      {
        label: '数据集B',
        data: [2, 3, 20, 5, 1, 4, 6, 9, 12],
        backgroundColor: 'rgba(54, 162, 235, 0.6)'
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    indexAxis: 'x',
    scales: {
      x: {
        stacked: true,
        position: 'top'
      },
      y: {
        stacked: true
      }
    },
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  }
});
</script>

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