4

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

4

5 回答 5

4

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

起初我的错误是在 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>
于 2011-02-19T16:21:25.963 回答
2

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

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

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

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

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

于 2012-05-16T02:47:06.633 回答
0

我不确定是否有使用 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;}
于 2011-01-30T23:24:21.417 回答
-1

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

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

于 2011-02-03T01:58:30.757 回答
-2

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

// for 0 row 0 column
data.setProperty(0, 0, "style", "valign:top;");
于 2011-01-27T09:29:16.423 回答