Нарисуйте вертикальные узлы в оргструктуре с помощью JavaScript - PullRequest
Новая
       20

Нарисуйте вертикальные узлы в оргструктуре с помощью JavaScript

0 голосов
/ 13 декабря 2018

Я хочу нарисовать организационную диаграмму с вертикальными узлами, используя html и javascript , как те, что на этой картинке .

В своем коде я импортирую данные из листа Google и рисуюгоризонтальный организационный график, но проблема с длинными данными, которые у меня будут, станет более крупной. 

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

Спасибо. Вся помощь приветствуется.

1 Ответ

0 голосов
/ 04 января 2019

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

И результат почти такой же, как на картинке, которую вы предоставили

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...