Google Charts组织结构图：能否实现层级的自定义排布？

Google Charts的OrgChart组件默认严格遵循树形数据的上下级关系渲染层级，没有直接的API参数可以强制调整节点的垂直层级，但可以通过添加隐藏的虚拟中间节点的技巧实现需求。

实现步骤 #

1. 在数据中添加一个虚拟节点，作为Alice的直接上级，该节点与Jim同属Mike的下属
2. 通过HTML样式隐藏这个虚拟节点，使其在图表中不可见
3. 将Alice的经理指向这个虚拟节点，这样Alice就会被渲染到Bob所在的垂直层级

修改后的代码示例 #

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // 新增隐藏的虚拟节点，作为Alice的上级
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          // 虚拟节点：设置display:none隐藏
          [{'v':'Dummy', 'f':'<div style="display:none"></div>'}, 'Mike', ''],
          ['Alice', 'Dummy', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

注意事项 #

• 这种方法利用了allowHtml选项支持自定义节点内容的特性，通过隐藏虚拟节点来模拟层级调整
• 若图表需要动态更新，需确保虚拟节点的逻辑同步更新
• 直接修改DOM节点位置的方法不推荐，因为图表重绘（如数据更新、窗口 resize）会重置布局

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