Ajax加载Google饼图时垂直显示而非水平显示的异常问题

我用Google Charts做了个简单的饼图，直接放在普通网页里显示是正常的水平布局，但通过Ajax点击加载后，饼图变成垂直拉伸的异常状态了。

<script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
      legend: {'position':'none'},
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
<div id="donutchart" style="width: 300px; height: 300px; border: 1px solid red;"></div>

1. 修正图表初始化时机 #

Ajax加载内容后，不要依赖google.charts.setOnLoadCallback自动触发绘制，要等内容完全插入DOM后再手动初始化图表：

// 示例Ajax回调逻辑
$.ajax({
  url: '你的内容接口地址',
  success: function(contentHtml) {
    // 先把图表相关代码和容器插入页面
    $('#target-container').html(contentHtml);
    // 手动加载图表库并触发绘制
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
  }
});

2. 确保容器尺寸生效 #

绘制图表前，强制触发浏览器重排，确保容器的宽高已经被正确计算：

function drawChart() {
  const container = document.getElementById('donutchart');
  // 触发浏览器重排，确认尺寸计算完成
  container.offsetHeight;
  
  // 以下为原图表绘制代码
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    legend: {'position':'none'},
  };

  var chart = new google.visualization.PieChart(container);
  chart.draw(data, options);
}

3. 排查CSS干扰 #

检查全局CSS是否意外修改了容器布局（比如flex/grid拉伸、transform旋转等），给容器添加隔离样式：

#donutchart {
  width: 300px !important;
  height: 300px !important;
  transform: none !important;
  flex: none !important;
  border: 1px solid red;
}

4. 监听尺寸变化自动重绘 #

如果容器尺寸在Ajax加载后可能动态变化，用ResizeObserver监听并重新绘制图表：

function drawChart() {
  // 原图表绘制代码...
}

// Ajax加载完成后执行
$('#target-container').html(contentHtml);
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(function() {
  drawChart();
  // 监听容器尺寸变化，自动触发重绘
  new ResizeObserver(drawChart).observe(document.getElementById('donutchart'));
});

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