Javascript Google组织结构图数据溢出到div之外

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

看我的

我得到的结果是：

和当前标准的组织结构图数据，但没有连接

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

---

我最终确实成功了，但没有直接使用OrgChart调用。我使用一个div手动创建了每张卡，并将该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;
}

google.load（'visualization'，'1'，{packages:['orgchart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var s='MikeJimAliceBobCarol查看。从引导应用到OrgChart div的表响应相同，它停止在外部绘制，并开始在底部显示水平滚动条

图表如下：

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

无法将可视化API OrgCharts配置为执行所需操作。
.chart_div {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}