绘制多个Google饼图需多次调用setOnLoadCallback()？代码仅显一个

嘿，先直接给你明确答案：完全不需要多次调用setOnLoadCallback()，反而多次调用会导致问题——这个方法的作用是在Google Charts库加载完成后触发指定的回调函数，如果你调用多次，只有最后一次的回调会生效，前面的都会被覆盖，这也是你只看到一个饼图的可能原因之一。

接下来我帮你梳理代码可能存在的几个常见问题，以及正确的实现思路：

常见问题排查点 #

• 容器ID重复：如果所有饼图都试图渲染到同一个ID的<div>容器里，后面的图表会直接覆盖前面的。确保每个饼图对应一个唯一ID的容器，比如<div id="pie-chart-1"></div>、<div id="pie-chart-2"></div>以此类推。
• 变量作用域问题：如果用循环创建图表时使用了var声明变量，会导致所有图表实例共享同一个变量引用，最终只有最后一个图表被正确渲染。换成let或const就能解决这个问题。
• 复用同一个图表实例：如果只创建一个google.visualization.PieChart实例，然后多次调用它的draw()方法，后面的绘制会覆盖前面的结果。每个饼图都需要独立实例化：new google.visualization.PieChart(document.getElementById('xxx'))。
• 容器无尺寸设置：如果饼图容器没有设置明确的width和height（可以用CSS或内联样式），图表可能因为尺寸为0而不显示。
• 数据加载不完整：如果你的饼图数据是异步获取的，没有确保所有数据加载完成就执行渲染，会导致部分图表因为没有数据而无法显示。

正确实现示例 #

下面是一个简单的多饼图实现模板，你可以参考调整：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  // 只调用一次setOnLoadCallback，在里面处理所有图表
  google.charts.setOnLoadCallback(drawAllCharts);

  function drawAllCharts() {
    // 定义多个数据集和容器ID
    const chartConfigs = [
      {
        containerId: 'pie-chart-1',
        data: [
          ['Task', 'Hours per Day'],
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
        ]
      },
      {
        containerId: 'pie-chart-2',
        data: [
          ['Fruit', 'Amount'],
          ['Apple', 40],
          ['Banana', 30],
          ['Orange', 20],
          ['Grape', 10]
        ]
      },
      // 可以继续添加更多图表配置...
    ];

    // 循环渲染每个饼图
    chartConfigs.forEach(config => {
      // 转换数据格式
      const data = google.visualization.arrayToDataTable(config.data);
      // 配置选项
      const options = {
        title: 'Sample Pie Chart',
        width: 400,
        height: 300
      };
      // 实例化独立的图表对象并渲染
      const chart = new google.visualization.PieChart(document.getElementById(config.containerId));
      chart.draw(data, options);
    });
  }
</script>

<!-- 对应多个容器 -->
<div id="pie-chart-1"></div>
<div id="pie-chart-2"></div>
<!-- 更多容器... -->

按照这个思路调整你的代码，应该就能正常显示所有饼图了。

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