无论如何要垂直对齐谷歌组织图表可视化中的框

Posted 2023-02-16

【中文标题】无论如何要垂直对齐谷歌组织图表可视化中的框

【英文标题】：is there anyway to vertically align the boxes in google org chart visualization

【发布时间】：2011-06-14 23:34:13

【问题描述】：

我正在使用google org chart visualization API，我希望将垂直对齐设置为单元格的顶部。 （我在每个组织结构图框中显示多个人，所以我希望每个“级别”都对齐顶部而不是中间。所以在示例中，您有 Alice 垂直居中。我想要它 valign="top"。这可以使用谷歌可视化 api 吗？？

【参考方案1】：

您可以为组织结构图中的元素设置样式。 我是这样做的...

一开始我的错误是在 Google javascript 代码上方添加 css 块。一旦我把它移下来，我几乎可以改变任何视觉属性。

<script type='text/javascript'>
      google.load('visualization', '1', packages:['orgchart']);
      google.setOnLoadCallback(drawChart);
      function drawChart() 

        /*GOOGLE MUMBO JUMBO GOES HERE*/

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, allowhtml:true);
      
</script>
<style type="text/css">
    .google-visualization-orgchart-node 
        width: 240px;
    
    .google-visualization-orgchart-node-medium 
        vertical-align: top;
    
</style>

【参考方案2】：

对于那些正在寻找一个简单的开源 Javascript 组织图库的人：

我刚刚发布了 lib_gg_orgchart。它使用 JSON 输入并使用 Raphael 绘制图表。

查看网站上的一些示例并下载：

http://www.fluxus.com.ve/gorka/lib_gg_orgchart

如果你觉得有用，请告诉我。

【讨论】：

lib_gg_orgchart 的新 Web 主页是 librerias.logicas.org/lib_gg_orgchart。新版本即将推出，修复一些错误并整合协作者的更改。

【参考方案3】：

我不确定是否有使用 Google API 的简单方法，但您可以使用简单的 CSS 来实现；

代替

['Alice', 'Mike', ''],

你可以写

['<div style="height:50px;vertical-align:top">Alice</div>', 'Mike', ''],

如果需要，您还可以编写 JavaScript 代码来计算该单元格的高度并将其分配给该单元格的 div 标签。

编辑：如果要垂直对齐 TD 元素，可以编写自定义 CSS；

.google-visualization-orgchart-node vertical-align:top;

【讨论】：

这不是在 div 内垂直对齐（而不是在表格本身内）吗？？

是的，它正在对齐 div。但是，如果您不想垂直对齐 div 而是垂直对齐 TD 元素，那么您可以编写自定义 CSS； .google-visualization-orgchart-node vertical-align:top;

【参考方案4】：

Elzo 有一个建议，但没有使用 valign: top;你需要使用 垂直对齐：顶部 如下所示

data.setProperty(0, 0, "style", "vertical-align:top;");

【参考方案5】：

您可以使用setProperty函数按单元格调整CSS：

// for 0 row 0 column
data.setProperty(0, 0, "style", "valign:top;");

【讨论】：

这似乎没有任何区别