DIV以外谷歌组织结构图数据溢出(Google Org Chart data overflow ou

我使用的是谷歌组织结构图的项目和图表的内容包含div的外部流动。 股利将在下面红色高亮显示。 我想在图表的节点移动到它会流的div外事件的下一行。 （爱丽丝会移动到下一行和数据将继续。）

见我的小提琴这里

的我有什么结果是：

目前标准组织结构图数据，但没有连接。

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);
}

Answer 1:

我也最终得到这个工作，但不能直接使用的组织结构图的呼叫。 我手动使用DIV，并给予每个创建的卡该分区之类的

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

并设置每个div来

display: inline-block

见下文的最终代码

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

我失去了一些的组织结构图功能，但实现了所需的项目的外观。 需要注意的是组织结构图码仍需下载（我需要这个项目的其他方面，所以它已经可用。）

见成品小提琴http://jsfiddle.net/4eD4u/1/

Answer 2:

在。表响应从自举同样适用于组织结构图格来看，它停止了绘画之外，开始出现在底部的水平滚动条。

图表放在这里：

 <div id="chart_div" class="chart_div"></div>

CSS：

.chart_div {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

文章来源: Google Org Chart data overflow outside of div