渲染Google条形图时设置100%宽高引发JavaScript错误求助

这问题我之前也碰到过！核心原因是Google Charts在处理百分比高度时，必须依赖父容器有明确的可计算高度——如果父元素的高度是auto或者也是百分比（且上层容器没设置高度），图表根本算不出自己该占多大空间，自然就报错了。而你改成固定像素400能正常渲染，是因为像素是明确的尺寸，图表可以直接使用。

下面是具体的解决方案：

1. 给图表的父容器设置明确高度 #

首先，确保承载图表的DOM元素（比如你用来放图表的<div>）有明确的高度值。可以用像素、视口高度（vh）或者让它继承上层容器的高度：

<!-- 示例：用视口高度让容器占满整个浏览器窗口 -->
<div id="chart-container" style="height: 100vh; width: 100%; margin: 0; padding: 0;"></div>

如果图表是嵌套在其他容器里，要确保所有上层容器都设置了高度，比如：

/* 假设父容器是body和一个wrapper */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 100%;
}

2. 调整图表配置的百分比参数 #

父容器有了明确高度后，你就可以把options里的height改回100%了。另外建议调整chartArea的高度百分比，避免图表内容（比如坐标轴、图例）被截断：

var options = {
  width: '100%',
  height: '100%', // 现在父容器有明确高度，这个百分比会生效
  chartArea: {
    height: '80%', // 留20%的空间给底部图例和坐标轴标签
    width: '100%',
    left: 85,
    top: 10,
    bottom: 60,
    right: 25
  },
  legend: {
    position: 'bottom',
    alignment: 'start'
  },
  annotations: { alwaysOutside: true},
  hAxis: {
    gridlines: { count: 10 },
  },
};

3. 可选：添加响应式支持（窗口 resize 时重新渲染） #

如果需要图表随窗口大小变化自动调整，可以监听resize事件，重新绘制图表：

// 初始化图表后添加监听
window.addEventListener('resize', function() {
  drawChart(); // 这里的drawChart是你初始化图表的函数
});

这样调整后，图表就能正常使用百分比高度渲染，同时保持响应式的特性。

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