时间戳

首页 > 解决方案 > 通过javascript在组织结构图中绘制垂直节点

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

问题描述

我想绘制一个带有垂直节点的组织结构图，使用像这张图片中的那些html 和 javascript 。

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

<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>

谢谢所有的帮助是受欢迎的。

标签： javascriptorgchart

解决方案

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"/>

结果几乎就像您提供的图片上的那些

推荐阅读