Chart.js图表未遵循容器高度：页面图表重叠问题咨询

我之前在做移动端Chart.js图表开发时，也碰到过类似的高度错位问题，结合你的情况，给你几个实用的排查和解决思路：

1. 强制图表遵循容器高度，关闭宽高比维护 #

Chart.js默认会保持图表的宽高比，这可能导致在移动端容器高度被挤压。你需要：

• 给每个图表的父容器设置固定高度和相对定位：

.chart-container {
  height: 200px;
  position: relative;
  margin-bottom: 24px; /* 先加个间距避免临时重叠 */
}

• 初始化图表时，在配置里开启响应式并关闭宽高比维护：

const chartInstance = new Chart(document.getElementById('your-chart-id'), {
  type: 'your-chart-type',
  data: yourChartData,
  options: {
    responsive: true,
    maintainAspectRatio: false, // 关键：强制图表适配容器高度
    // 其他自定义配置
  }
});

2. 确认viewport配置正确 #

移动端页面如果没有正确设置viewport，会导致尺寸计算偏差。确保HTML头部添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

3. 处理动态布局下的图表重绘 #

如果页面存在动态布局变化（比如导航折叠、窗口 resize），需要手动触发图表重绘：

// 监听窗口 resize 事件，确保图表适配
window.addEventListener('resize', () => {
  chartInstance.resize();
});

4. 排查CSS样式冲突 #

用浏览器开发者工具的移动端模拟模式，检查canvas元素和其父容器的实际计算高度：

• 看是否有父元素的padding、margin或者overflow属性影响了容器高度
• 检查是否有全局样式（比如* { box-sizing: content-box; }）导致容器尺寸计算错误

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