とにかくGoogle Orgチャートの視覚化のボックスを垂直に揃える

StackOverflow https://stackoverflow.com/questions/4790205

質問

私は使っている Google Org Chart Visualization API そして、私はセルの上に垂直方向のアライメントを設定したいと思っています。 （私は各組織チャートボックスに複数の人を表示しているので、すべての「レベル」が真ん中ではなく上部に並べることを望みます。したがって、あなたが持っている例では アリス 垂直に中央にあります。 valign = "top"にしたい。これは、Google Visualization APIを使用することが可能ですか？

役に立ちましたか？

解決

ORGチャート内の要素をスタイリングできます。これが私がそれをした方法です...

最初の私の間違いは、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>

他のヒント

シンプルでオープンソースのJavaScript組織チャートライブラリを探している人のために：

lib_gg_orgchartを公開しました。 JSON入力を使用し、Raphaelを使用してチャートを描画します。

いくつかの例については、サイトをご覧ください。ダウンロードしてください。

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

便利だと思うなら、私に知らせてください。

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;}

Elzoには提案がありましたが、Valign：Topを使用する代わりに。以下のように、垂直アライイン：トップを使用する必要があります

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

CellでCSSを調整できます SetProperty 関数：

// for 0 row 0 column
data.setProperty(0, 0, "style", "valign:top;");
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top