本文解决 Google Charts 在页面首次加载时图表过小、仅在窗口缩放后才响应式适配的问题，通过动态设置容器尺寸并结合 resize 事件监听，确保初始渲染即符合屏幕条件。
本文解决 google charts 在页面首次加载时图表过小、仅在窗口缩放后才响应式适配的问题，通过动态设置容器尺寸并结合 `resize` 事件监听，确保初始渲染即符合屏幕条件。
Google Charts 本身不原生支持 CSS 百分比宽高（如 width: 100%）的自动适配，其渲染逻辑依赖于容器元素在绘制时刻的精确像素尺寸。若仅依赖媒体查询（@media）或静态 CSS 设置，在 DOM 渲染完成但图表尚未绘制前，容器可能尚未获得预期尺寸；而 google.visualization.LineChart.draw() 一旦执行，就会按当时容器尺寸进行 SVG 布局——这就导致“初始加载极小、缩放后才变大”的典型问题。
核心解决思路是：在图表绘制前，主动根据当前视口宽度计算并设置 #chart_div 的宽高，并在窗口尺寸变化时同步更新容器尺寸 + 重绘图表。
以下是推荐的完整实现方案：
✅ 步骤一：移除 CSS 中的 !important 强制固定尺寸
保留媒体查询用于视觉降级参考，但不再作为主控逻辑：
#chart_div {
/* 移除 width/height !important —— 改由 JS 动态控制 */
display: inline-block;
margin: 0 auto;
}
@media (max-width: 992px) {
/* 可选：作为兜底样式，但非主力 */
#chart_div {
max-width: 100%;
}
}
✅ 步骤二：添加动态尺寸设置函数
该函数根据 window.innerWidth 决定容器尺寸，并可复用于初始化与响应式更新：
function setChartDimensions() {
const chartDiv = document.getElementById('chart_div');
if (!chartDiv) return;
const width = window.innerWidth <h3>✅ 步骤三：在图表加载与绘制流程中集成尺寸控制</h3><p>关键修改点（对比原文）：</p>
- google.charts.setOnLoadCallback 中先调用 setChartDimensions()，再执行 drawSelectedChart()；
- 所有 drawXxx() 函数内部的 resize 监听器，统一改为：先调用 setChartDimensions() 更新容器，再重绘图表；
- 避免重复绑定 resize 事件（原代码中每次 drawChart() 都新增监听器，易造成内存泄漏和多次重绘）。
优化后的初始化与监听逻辑如下：
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(function () {
setChartDimensions(); // ✅ 确保绘制前容器已就位
drawSelectedChart(currentChartType);
});
// 全局统一 resize 处理（只绑定一次）
let resizeTimer;
window.addEventListener('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
setChartDimensions();
drawSelectedChart(currentChartType); // ✅ 重绘当前激活图表
}, 200); // 防抖，避免高频触发
});
✅ 步骤四：精简并复用绘图逻辑
将重复的 chart.draw(data, options) 封装为通用函数，避免 drawChart / drawChartTime 中冗余代码：
function renderLineChart(data, options) {
const chartDiv = document.getElementById('chart_div');
const chart = new google.visualization.LineChart(chartDiv);
chart.draw(data, options);
}
然后在各业务绘图函数中调用：
function drawChart() {
// ... 构建 data
const options = { /* 配置 */ };
renderLineChart(data, options);
}
function drawChartTime() {
// ... 构建 data
const options = { /* 配置 */ };
renderLineChart(data, options);
}
⚠️ 注意事项
- 禁止在 options 中硬编码 width/height：Google Charts 会优先采用 options.width/height，覆盖 CSS 或 JS 设置的容器尺寸，破坏响应式逻辑；
- 务必使用 setTimeout 防抖：resize 事件高频触发，直接重绘会导致性能卡顿甚至崩溃；
- 确保 #chart_div 父容器无隐藏或 display: none：若图表容器初始不可见（如 Tab 切换页），需在显示后再调用 setChartDimensions() + draw()；
-
移动端建议补充 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过以上结构化调整，Google Chart 将在首次加载时即呈现正确尺寸，并在后续窗口变化中平滑响应，彻底解决“初始过小、缩放才生效”的体验缺陷。
