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

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

READ ALSO
Как сделать живой поиск на vue.js

Как сделать живой поиск на vue.js

Есть набор данных такого вида

114
подгрузка фото при смене слайдера

подгрузка фото при смене слайдера

как при смене слайда подгружать фото в из data_slide_img

116
Почему не работает стандартный метод offset().top

Почему не работает стандартный метод offset().top

При клике на ссылку вместо плавного скролла консоль выдает ошибку

141
путь к новой картинке

путь к новой картинке

Есть imgНужно чтобы пользователь при нажатии на эту картинку мог выбрать со своего устройства собственную картинку

100