如何单次加载多个Google Charts包？树形图无法渲染

看起来你的核心问题是单次调用google.charts.load()时没包含treemap依赖包，导致树形图的API未被加载，所以无法正常渲染。下面是具体的修复方案：

1. 修正google.charts.load()的包配置 #

因为你需要同时使用条形图、饼图和树形图，必须在唯一的load()调用中声明所有依赖的包：条形图和饼图属于corechart包，树形图需要单独指定treemap包。正确的加载代码应该是：

google.charts.load('current', {'packages': ['corechart', 'treemap']});

注意：这个调用要放在页面初始化的最外层（比如$(document).ready()内部的最顶部），确保所有图表API提前加载完成。

2. 在点击事件中正确实现树形图绘制逻辑 #

假设你已经在页面中定义了树形图的容器（比如#treemap-container），可以在submit点击事件里添加树形图的绘制代码，示例如下：

$(document).ready(function () {
  // 仅调用一次load，包含所有需要的图表包
  google.charts.load('current', {'packages': ['corechart', 'treemap']});
  
  // 等待所有API加载完成后再绑定交互事件
  google.charts.setOnLoadCallback(function() {
    $("#submit").click(function () {
      $("#pages").hide();
      var datefrom = $('#fromdatecalendar').val();
      var dateto = $('#todatecalendar').val();

      // --- 保留你现有的条形图、饼图绘制代码 ---

      // --- 添加树形图绘制逻辑 ---
      // 1. 准备符合treemap要求的数据：列依次为节点名称、父节点、数值
      var treemapData = new google.visualization.DataTable();
      treemapData.addColumn('string', '节点名称');
      treemapData.addColumn('string', '父节点');
      treemapData.addColumn('number', '权重值');
      treemapData.addRows([
        ['总类别', null, 0],
        ['类别A', '总类别', 150],
        ['类别B', '总类别', 280],
        ['子类别A1', '类别A', 70],
        // 这里替换成你的业务数据
      ]);

      // 2. 设置树形图的显示选项
      var treemapOptions = {
        minColor: '#e6f2ff',
        midColor: '#66b3ff',
        maxColor: '#004080',
        headerHeight: 20,
        fontColor: '#333',
        showScale: true
      };

      // 3. 初始化并渲染树形图
      var treemap = new google.visualization.TreeMap(document.getElementById('treemap-container'));
      treemap.draw(treemapData, treemapOptions);
    });
  });
});

3. 关键检查项 #

• 确保页面上存在树形图的容器元素，比如：

<div id="treemap-container" style="width: 900px; height: 600px;"></div>

• 绝对不要多次调用google.charts.load()，所有依赖包必须一次性声明在packages数组中。
• 树形图的数据格式必须严格遵循要求：根节点的父节点填null，数值列用于决定节点的大小占比。

如果还是无法渲染，可以打开浏览器控制台查看报错信息（比如容器不存在、数据格式错误等），这些信息能帮你快速定位问题。

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