Question

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

Answer 1

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

我最初的错误是将css块添加到Google Javascript代码之上。一旦我将它移动，我几乎可以改变任何视觉属性。

<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有一个建议，但不是使用valign：top;你需要使用 vertical-align：top 如下所示

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

Answer 5

您可以使用setProperty函数

逐个单元格调整CSS

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

无论如何，在Google组织结构图可视化中垂直对齐框

5 个答案: