4

google org chart visualization APIを使用していますが、セルの上部に垂直方向の配置を設定したいと考えています。（各組織図ボックスに複数の人を表示しているので、すべての「レベル」を中央ではなく上に揃えます。この例では、垂直方向に中央に配置されたアリスがあります。valign="topにします。 "。これは、Googleの視覚化APIを使用して行うことができますか？

4

5 に答える 5

4

組織図内の要素のスタイルを設定できます。これが私がそれをした方法です...

私の最初の間違いは、GoogleJavascriptコードの上に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 に答える