响应式Google折线图仅在首次窗口调整后显示，如何解决？

这个问题我碰到过好几次，核心原因是图表初始化时没有立即执行绘制操作，再加上你的代码里还有几处小问题，导致图表只在窗口尺寸变化时才触发绘制。咱们一步步来修复：

问题分析 #

1. 重复加载Google可视化库：你代码里先后调用了两次google.load('visualization', ...)，这会导致加载逻辑冲突，打乱回调执行顺序。
2. AJAX成功后未立即绘制图表：你只在$(window).resize事件里绑定了chart.draw，但页面加载完成后没有主动触发一次绘制。
3. 容器尺寸可能未明确：虽然CSS给了#chart宽度100%，但#chart_div没有明确的高度设置，Google图表初始化时可能无法正确识别容器尺寸。

修复步骤 #

1. 移除重复的google.load调用 #

只保留一次google.load，确保回调函数正确触发。

2. AJAX成功后立即绘制图表 #

在AJAX的success回调里，创建完图表和配置后，立即调用一次chart.draw(data, options)，而不是只等resize事件。

3. 明确容器的尺寸设置 #

给#chart_div添加明确的高度样式，避免图表初始化时无法获取正确尺寸。

4. 优化resize事件绑定 #

为了避免重复绑定resize事件（比如多次调用drawChart的情况），可以先解绑再绑定，避免重复触发。

修正后的完整代码 #

JavaScript #

// 只加载一次Google可视化库
google.load('visualization', '1.0', {'packages':['corechart'], callback: drawChart});

function drawChart () {
  $.ajax({
    url: 'Temp.ESP',
    type: 'get',
    success: function (txt) {
      var dataArray = [['Name', 'Date']];
      var txtArray = txt.split('\n');
      for (var i = 0; i < txtArray.length; i++) {
        // 跳过空行，避免解析错误
        if (!txtArray[i].trim()) continue;
        var tmpData = txtArray[i].split(/\s+/);
        dataArray.push([tmpData[0], parseInt(tmpData[1])]);
      }
      var data = google.visualization.arrayToDataTable(dataArray);
      var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
      var options = {
        width: '100%',
        height: '400px', // 设置明确高度，或确保父容器有高度后用百分比
        legend: 'none',
        colors: ['red'],
        hAxis: { textStyle:{color: 'white'}},
        vAxis: { textStyle:{color: 'white'}},
        backgroundColor: { fill:'transparent' }
      };

      // 关键：页面加载完成后立即绘制一次图表
      chart.draw(data, options);

      // 绑定resize事件，先解绑再绑定避免重复触发
      $(window).off('resize').on('resize', function(){
        chart.draw(data, options);
      });
    },
    error: function() {
      // 增加错误处理，方便调试
      console.error('加载数据文件失败');
    }
  });
}

// 数据刷新逻辑保持不变
setInterval(function(){
  $.get( "mydata.php", function( data ) {
    $( "#mydata" ).html( data );
  });
}, 1000);

CSS #

/* 确保父容器有明确高度，子容器继承尺寸 */
#chart{
  width: 100%;
  height: 400px;
}
#chart_div{
  width: 100%;
  height: 100%;
}

HTML #

<div id="chart">
  <div id="chart_div"></div>
</div>

额外说明 #

• 循环里添加了if (!txtArray[i].trim()) continue;，用来跳过文本文件里的空行，避免解析空字符串导致的错误。
• 给options里的height设置了具体像素值，如果你想用百分比，要确保父容器#chart有明确的高度，否则百分比高度会失效。
• 增加了AJAX的error回调，方便调试数据加载失败的情况。

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