通过javascript在组织结构图中绘制垂直节点答案

【问题标题】：Draw vertical nodes in org chart by javascript通过javascript在组织结构图中绘制垂直节点
【发布时间】：2018-12-13 09:31:27
【问题描述】：

我想用 html 和 javascript like those ones in this picture 绘制一个带有垂直节点的组织结构图。

在我的代码中，我从 google sheet 导入数据并绘制水平组织结构图，但问题在于我将拥有图表的长数据会变得更大。

<html>
<head>
</head>
<body>
  <div id="orgchart_admin"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages' : ['orgchart', 'table']});
    google.charts.setOnLoadCallback(function() { initialize('') });

    function initialize() {
      document.getElementById('orgchart_admin').innerHTML = "<i class='fa fa-spinner fa-spin fa-3x fa-fw'></i>";
      
      var dataSourceUrl = 'https://docs.google.com/spreadsheets/d/6dPVwx_LNfpo0ArgiJOYteBmZNR7cWsjDhYIZKc20pY/gviz/tq?';

      // Tells it that the first row contains headers: 'Role', 'Reports To', 'Name'
      var query = new google.visualization.Query(dataSourceUrl + '&headers=1');

      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      // Called when the query response is returned.
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var raw_data = response.getDataTable();
      var data = new google.visualization.DataTable();

      data.addColumn('string', 'Entity');
      data.addColumn('string', 'ParentEntity');
      data.addColumn('string', 'ToolTip');

      // Loops through all rows and populates a new DataTable with formatted values for the orgchart
      var num_rows = raw_data.getNumberOfRows();
      for (var i = 0; i < num_rows; i++) {
        var role = raw_data.getValue(i, 0);
        var reportsTo = raw_data.getValue(i,1);
        var name = raw_data.getValue(i,2) != null ? raw_data.getValue(i,2) : '';

        data.addRows([[
          { v: role,
            f: "<a class='role' href='#'>" + name + "<br/>" + role + "</a>"
          }, 
          reportsTo, 
          name]]);
      }

      // Loops through all rows and populates a new DataTable with formatted values for the orgchart
      var container = document.getElementById('orgchart_admin');
      var chart = new google.visualization.OrgChart(container);
      chart.draw(data, {allowHtml:true, 'size': 'large'});
    }      
  </script>
</body>
</html>

谢谢欢迎所有帮助。

【问题讨论】：

你想达到什么目的？到目前为止，您尝试了什么（包括代码）？
StackOverflow 用于帮助解决现有代码和代码问题。您的问题（？）不在此范围内。请说明您已经尝试过的内容以及需要帮助的内容。
@EmilS.Jørgensen 完成，我修改了我的帖子
@SoukainaBoukir 我似乎无法运行你的 sn-p。您可能已经阅读过这篇文章，但这里是 Google Chart Org-chart 上的 Google 教程。你说你的问题是图表太大了？
@EmilS.Jørgensen 是的，确实，当节点数量很大时，它会变大并显示滚动，这就是为什么我正在寻找一种垂直显示它们的方法

标签： javascript orgchart

【解决方案1】：

Google orgchart 不支持混合布局。您可以使用OrgChart JS 来实现请求的功能。这是一个例子：

 var chart = new OrgChart(document.getElementById("tree"), {    
            layout: BALKANGraph.mixed,
            nodeBinding:{
              field_0: "id"
            },
            enableSearch: false,
            nodes: [
                { id: "1"  },
                { id: "2", pid: "1"},
                { id: "3", pid: "1"},
                { id: "4", pid: "2"},
                { id: "5", pid: "2"},
                { id: "6", pid: "3"},
                { id: "7", pid: "3"}
            ]
        });

        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-align: center;
            font-family: "Trebuchet MS";
        }

        #tree {
            width: 100%;
            height: 100%;
            position: relative;
        }

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"/>

结果和你提供的图片差不多

【讨论】：