如何实现Google Charts图表随窗口大小调整自动缩放（基于Google Web App）

这事儿其实不难搞定，只要给图表加上窗口尺寸变化的监听，再配合相对尺寸的容器就能实现自动适配。我给你修改了代码，同时加了防抖处理避免频繁重绘，具体如下：

修改后的完整代码 #

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(initChart);

    let chart;
    let data;
    let options;

    function initChart() {
      // 初始化数据和配置，避免重复创建浪费性能
      data = google.visualization.arrayToDataTable([
        ['Mon', 20, 28, 38, 45],
        ['Tue', 31, 38, 55, 66],
        ['Wed', 50, 55, 77, 80],
        ['Thu', 77, 77, 66, 50],
        ['Fri', 68, 66, 22, 15]
      ], true);

      options = {
        legend:'none'
      };

      drawChart();
      // 监听窗口 resize 事件，用防抖函数控制重绘频率
      window.addEventListener('resize', debounce(drawChart, 250));
    }

    function drawChart() {
      chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

    // 防抖函数：避免窗口拖动时连续触发重绘
    function debounce(func, delay) {
      let timeoutId;
      return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
      };
    }
  </script>
  <style>
    /* 确保body没有默认边距，让容器能铺满可用宽度 */
    body {
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <!-- 用百分比宽度实现自适应，高度可按需调整为固定值/百分比/视窗单位 -->
  <div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>

关键改动说明 #

• 容器尺寸适配：把原来固定的width: 900px改成width: 100%，让容器宽度随父元素（body）自动适配窗口宽度；高度可以保留固定值，也可以改成height: 80vh这类视窗单位实现高度自适应。
• 分离初始化与绘制：将数据和配置的初始化逻辑抽离到initChart中，避免每次窗口变化都重复创建数据对象，提升性能。
• 添加防抖的resize监听：窗口拖动时会连续触发resize事件，用防抖函数设置250ms延迟，确保只有在窗口停止调整后才重绘图表，避免页面卡顿。
• 全局变量复用资源：把chart、data、options设为全局变量，方便在重绘时直接复用，不用每次重新初始化。

这样调整后，拖动窗口改变大小时，图表就会自动适配新的窗口尺寸啦。

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