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

Posted 2023-02-16

【中文标题】div 之外的 Google 组织结构图数据溢出

【英文标题】：Google Org Chart data overflow outside of div

【发布时间】：2014-07-03 06:45:33

【问题描述】：

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

见我的fiddle here

我所拥有的结果是：

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

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

【问题讨论】：

无法将可视化 API OrgCharts 配置为执行您想要的操作。

【参考方案1】：

我确实最终得到了这个工作，但没有直接使用 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;

我失去了一些 OrgChart 功能，但实现了项目所需的外观。请注意，OrgChart 代码仍然需要下载（我需要它用于项目的其他方面，因此它已经可用。）

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

【参考方案2】：

从引导程序查看 .table-responsive 并将其应用于 OrgChart div，它停止在外部绘制并开始在底部显示水平滚动条。

图表在这里：

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