[英]is there anyway to vertically align the boxes in google org chart visualization
i am using google org chart visualization API and i want to have the vertical alignment set to top on the cells. 我正在使用谷歌组织图表可视化API ,我希望将垂直对齐设置在单元格的顶部。 (i am showing multiple people in each org chart box so i want every "level" to align to the top instead of the middle. So in the example, where you have Alice which is vertically centered. i want it to valign="top". is this possible to do using the google visualization api ??
(我在每个组织结构图框中显示多个人,所以我希望每个“级别”对齐顶部而不是中间。所以在示例中,你有Alice垂直居中。我想要它valign =“top “。这可以使用谷歌可视化API?
You can style the elements within the Org Chart. 您可以在组织结构图中设置元素的样式。 Here's how I did it...
这是我怎么做的......
My mistake at first was to add the css block above the Google Javascript code. 我最初的错误是将css块添加到Google Javascript代码之上。 Once I moved it down, I could change pretty much any visual property.
一旦我把它移下来,我几乎可以改变任何视觉属性。
<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>
For those looking for a simple, open-source Javascript Organizational Chart library: 对于那些寻找简单的开源Javascript组织结构图库的人:
I've just published lib_gg_orgchart. 我刚刚发布了lib_gg_orgchart。 It uses a JSON input and draws the chart using Raphael.
它使用JSON输入并使用Raphael绘制图表。
Take a look at the site for some examples and download: 看一下网站上的一些例子并下载:
http://www.fluxus.com.ve/gorka/lib_gg_orgchart http://www.fluxus.com.ve/gorka/lib_gg_orgchart
If you find it useful, please let me know. 如果您觉得它很有用,请告诉我。
I'm not sure if there is a simple way to do that with Google API but you can achieve that with simple CSS; 我不确定是否有一种简单的方法可以使用Google API,但您可以通过简单的CSS实现这一点;
Instead of 代替
['Alice', 'Mike', ''],
you can write 你可以写
['<div style="height:50px;vertical-align:top">Alice</div>', 'Mike', ''],
If you want, you can also write a JavaScript code to calculate that cell's height and assign it to that cell's div tag. 如果需要,您还可以编写JavaScript代码来计算该单元格的高度,并将其分配给该单元格的div标记。
EDIT: If you want to vertically align the TD element, you can write a custom CSS; 编辑:如果要垂直对齐TD元素,可以编写自定义CSS;
.google-visualization-orgchart-node {vertical-align:top;}
Elzo had a suggestion but instead of using valign: top; Elzo有一个建议,但不是使用valign:top; you need to use vertical-align: top like below
你需要使用vertical-align:top,如下所示
data.setProperty(0, 0, "style", "vertical-align:top;");
You can adjust CSS by cell with setProperty function: 您可以使用setProperty函数按单元格调整CSS:
// for 0 row 0 column
data.setProperty(0, 0, "style", "valign:top;");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.