Как сделать google orgchart горизонтальным?

118

21 сентября 2019, 21:00

подскажите как можно сделать

google orgchart не в вертикальном ветвлении (сверху вниз), а в горизонтальном (слева на право)?

 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'); 
 
    // For each orgchart box, provide the name, manager, and tooltip to show. 
    data.addRows([ 
      [{v:'U.1', f:'Oliver'},'', ''], 
      [{v:'U.2', f:'Jack'},'U.1', ''], 
      [{v:'U.3', f:'Noah'}, 'U.2', ''], 
      [{v:'G.1', f:'<div data-group="G.1"></div>'}, 'U.2', ''], 
      [{v:'U.5', f:'Jacob'}, 'U.3', ''], 
      [{v:'U.6', f:'Charlie'}, 'U.1', ''] 
    ]); 
 
    var nodes = [ 
        [{v:'U.7', f:'<div>Harry</div>'}, 'G.1', ''], 
        [{v:'U.8', f:'<div>Joshua</div>'}, 'G.1', ''], 
        [{v:'U.9', f:'<div>James</div>'}, 'G.1', ''], 
        [{v:'U.10', f:'<div>Ethan</div>'}, 'G.1', ''] 
      ]; 
 
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
    chart.draw(data, {allowHtml:true}); 
 
    $("div[data-group]").each(function () 
        { 
            var parent = $(this).parent(); 
    $(this).css('position', 'absolute'); 
    $(this).css('padding-top', '0'); 
            parent.removeClass("google-visualization-orgchart-node"); 
            parent.removeClass("google-visualization-orgchart-node-medium"); 
    parent.css('vertical-align', 'top'); 
            parent.css('min-width', '120px'); 
            parent.css('vertical-align', 'top'); 
    parent.css('padding-top', '0'); 
 
    var group = $(this).data('group'); 
            if(group !== undefined)  
            { 
      for(var i=0; i < nodes.length; i++) 
                { 
        var node = nodes[i]; 
        if(node[1] === group)  
        { 
            $(this).append(node[0].f);  
        } 
                } 
      $('div', this).addClass("google-visualization-orgchart-node"); 
      $('div', this).addClass("google-visualization-orgchart-node-medium"); 
      $('div', this).css('margin-bottom','5px'); 
            $('div', this).css('width', '100px'); 
            } 
        }); 
 
 
  }

<!DOCTYPE html> 
<html> 
 
  <head> 
    <link rel="stylesheet" href="style.css"> 
    <script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script src="script.js"></script> 
  </head> 
 
  <body> 
    <div id="chart_div"></div> 
  </body> 
 
</html>