如何用ChartJS降低左侧柱状图高度，使其与右侧高度一致？

问题说明 #

使用ChartJS绘制柱状图时，需要让左侧柱状图高度与右侧保持一致，尝试通过缩小父容器高度实现，但出现柱状图溢出容器的问题（未使用绝对定位）。

尝试的代码 #

<div class="content competencesHeight" style="height: 100px !important;">
   <canvas class="skills"
      data-dataset3="{{ baseSkillsAndScores.managerLevels[i]* 20|json_encode }}"
      data-dataset4="{{ baseSkillsAndScores.minimalLevels[i] * 20|json_decode }}"
      data-label1="{{ 'legends.average_manager_evaluation'|trans({}, 'dashboard') }}"
      data-label2="{{ 'legends.average_expected_levels'|trans({}, 'dashboard') }}"
   >
   </canvas>
</div>

可行解决方案 #

1. 开启ChartJS响应式适配 #

初始化Chart实例时，开启响应式并关闭宽高比锁定，让图表完全适配父容器尺寸：

const ctx = document.querySelector('.skills').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: { /* 你的数据配置 */ },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    // 其他图表配置
  }
});

此设置会让图表自动填充父容器，从根源避免溢出问题。

2. 给父容器添加溢出隐藏 #

在父容器样式中加入overflow: hidden，即使存在少量溢出也会被容器裁剪：

<div class="content competencesHeight" style="height: 100px !important; overflow: hidden;">
   <!-- canvas代码 -->
</div>

3. 统一左右图表的Y轴刻度范围 #

如果左右是两个独立Chart实例，设置相同的Y轴min和max值，让柱状图基于同一刻度范围计算高度：

// 共用的Y轴配置
const sharedYAxis = {
  min: 0,
  max: 100 // 根据你的数据实际范围调整
};

// 左侧图表初始化
new Chart(leftCanvasCtx, {
  options: {
    scales: {
      y: sharedYAxis
    }
  }
});

// 右侧图表初始化
new Chart(rightCanvasCtx, {
  options: {
    scales: {
      y: sharedYAxis
    }
  }
});

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