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

发布于 2024-10-14 13:17:17 字数 296 浏览 10 评论 0原文

我正在使用 Google 组织结构图可视化 API,我想要将垂直对齐设置为单元格的顶部。 (我在每个组织结构图框中显示多个人员,因此我希望每个“级别”与顶部而不是中间对齐。因此,在示例中,Alice 垂直居中。i想要它 valign="top" 可以使用 google 可视化 api 来实现吗?

i am using google org chart visualization API and i want to have the vertical alignment set to top on the cells. (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 ??

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

夏雨凉 2024-10-21 13:17:18

我不确定是否有一种简单的方法可以使用 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;}

I'm not sure if there is a simple way to do that with Google API but you can achieve that with simple 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.

EDIT: If you want to vertically align the TD element, you can write a custom CSS;

.google-visualization-orgchart-node {vertical-align:top;}
猛虎独行 2024-10-21 13:17:18

Elzo 有一个建议,但不要使用 valign: top;你需要使用
垂直对齐:顶部
就像下面的

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

Elzo had a suggestion but instead of using valign: top; you need to use
vertical-align: top
like below

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

辞慾 2024-10-21 13:17:18

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

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

You can adjust CSS by cell with setProperty function:

// for 0 row 0 column
data.setProperty(0, 0, "style", "valign:top;");
土豪我们做朋友吧 2024-10-21 13:17:17

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

我一开始的错误是在 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>

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. 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>
蓦然回首 2024-10-21 13:17:17

对于那些寻找简单、开源 Javascript 组织图表库的人:

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

查看该网站的一些示例并下载:

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

如果您觉得有用,请告诉我。

For those looking for a simple, open-source Javascript Organizational Chart library:

I've just published lib_gg_orgchart. It uses a JSON input and draws the chart using Raphael.

Take a look at the site for some examples and download:

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

If you find it useful, please let me know.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文