解决 Google Chart 初次加载时尺寸过小、仅在窗口缩放后才响应的问题，关键在于在图表绘制前主动根据视口宽度动态设置容器尺寸，而非依赖 CSS 媒体查询或硬编码宽高。
解决 google chart 初次加载时尺寸过小、仅在窗口缩放后才响应的问题，关键在于**在图表绘制前主动根据视口宽度动态设置容器尺寸**，而非依赖 css 媒体查询或硬编码宽高。
Google Charts 本身不原生支持 CSS width: 100% 或 max-width 的自适应渲染（尤其对
容器），其内部绘图逻辑依赖于 DOM 元素的显式像素尺寸。因此，即使你用媒体查询设置了不同断点下的 #chart_div 尺寸，若该元素在首次 draw() 调用时尚未被浏览器计算出正确尺寸（例如因父容器未渲染完成、CSS 加载延迟或 JS 执行时机问题），图表便会以默认极小尺寸（如 400×200）渲染，导致“初始加载 tiny”的现象。
✅ 正确解法是：在 google.charts.setOnLoadCallback 中，先执行尺寸初始化，再绘制图表；并在 resize 事件中同步更新尺寸与重绘。
以下为优化后的核心实现：
1. 移除 CSS 中的 !important 强制宽高（推荐）
/* ✅ 推荐：保留基础布局，交由 JS 精确控制 */
#chart_div {
display: inline-block;
margin: 0 auto;
}
⚠️ 注：!important 会阻碍 JS 动态修改样式，且媒体查询在 JS 执行前可能尚未生效，易造成尺寸竞争。
2. 添加动态尺寸设置函数
function setChartDimensions() {
const chartDiv = document.getElementById('chart_div');
const width = window.innerWidth <h3>3. 在图表加载回调中<strong>先设尺寸、再绘图</strong>
</h3><pre class="brush:php;toolbar:false;">google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(function () {
setChartDimensions(); // ✅ 关键：首次渲染前确保尺寸已就绪
drawSelectedChart(currentChartType);
});4. 重构 resize 监听逻辑（统一管理）
function bindResizeHandler(drawFn) {
window.addEventListener('resize', function () {
setChartDimensions(); // 先更新容器尺寸
drawFn(); // 再重绘图表（触发重绘时会读取最新尺寸）
}, false);
}
// 在各 draw 函数末尾调用：
function drawChart() {
// ... 数据与 options 配置
const chartDiv = document.getElementById('chart_div');
const chart = new google.visualization.LineChart(chartDiv);
chart.draw(data, options);
bindResizeHandler(drawChart); // ✅ 统一绑定，避免重复监听
}✅ 最佳实践补充
- 避免重复监听：原代码中 drawChart 和 drawChartTime 各自添加 resize 事件，可能导致多次绑定。使用 bindResizeHandler 封装可确保单例监听。
- 数据复用注意：示例中 data.addRows(rows) 多次调用前需确保 data 已初始化（如 var data = new google.visualization.DataTable();），否则会报错。
- 移动端增强：可进一步结合 window.devicePixelRatio 设置 options.chartArea 或字体大小，提升高清屏显示质量。
- 性能提示：resize 事件高频触发，如需优化，可添加防抖（debounce），但对图表重绘场景影响较小，非必需。
通过以上改造，图表将在页面加载完成瞬间即以匹配当前屏幕的正确尺寸渲染，并在窗口缩放时平滑响应——真正实现「首屏即响应」。
