无论如何，是否有垂直对齐Google org图表可视化中的框

Question

我在用 Google org图表可视化API 我想将垂直对齐设置为顶部。 （我在每个组织图表框中显示多个人 爱丽丝 这是垂直中心的。我希望它可以坐下=“ top”。使用Google可视化API可以做到这一点吗？

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

Answer 2

对于那些寻找简单的开源JavaScript组织图表库的人：

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

查看网站以获取一些示例并下载：

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

如果您发现它有用，请告诉我。

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

Answer 4

埃尔佐（Elzo）有一个建议，但没有使用velign：top;您需要使用垂直空间：上面如下

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

Answer 5

您可以通过单元调整CSS setProperty 功能：

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