Google组织图数据溢出div [英] Google Org Chart data overflow outside of div

问题描述

我正在为项目使用Google组织结构图，图表的内容正在包含div的外部。 div在下面用红色突出显示。我希望图表的节点移动到下一行，在事件中它将流出div。 （Alice会移动到下一行，数据将继续。）

查看我的

I'm using Google Org chart for a project and the content of the chart is flowing outside of the containing div. The div is highlighted in red below. I would like the nodes of the chart to move to the next line in the event it will flow outside of the div. (Alice would move to the next row and the data would continue.)

See my fiddle here

The result of what I have is:

And currently standard org chart data but without connections.

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');
    data.addRows([
          [{v:'Mike', f:'Mike'}, '', 'The President'],
          [{v:'Jim', f:'Jim'}, '', 'VP'],
          ['Alice', '', ''],
          ['Bob', '', 'Bob Sponge'],
          ['Carol', '', '']
        ]);

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    var options = {
        allowHtml: true
    };


    chart.draw(data, options);
}

解决方案

I did end up getting this to work, but not using an OrgChart call directly. I manually created each card by using a div and giving that div the class of

google-visualization-orgchart-node  google-visualization-orgchart-node-small

And setting each div to

display: inline-block

See final code below

google.load('visualization', '1', {packages: ['orgchart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var s = '<div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Mike</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Jim</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Alice</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Bob</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Carol</div';

    document.getElementById('chart_div').innerHTML = s;
}

I lost some of the OrgChart functionality, but achieves the look that the project required. Note that the OrgChart code still needs to be downloaded (I require it for other aspects of the project so it was already available.)

See fiddle of finished product http://jsfiddle.net/4eD4u/1/

这篇关于Google组织图数据溢出div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！