Gibt es ohnehin, um die Felder in der Google Org -Diagrammvisualisierung vertikal auszurichten

Question

ich benutze Google Org -Diagramm -Visualisierungs -API Und ich möchte, dass die vertikale Ausrichtung auf den Zellen auf die Spitze steht. (Ich zeige mehrere Personen in jedem Org -Diagramm -Box, damit ich jedes "Level" an der Oberseite statt in der Mitte ausrichten kann. Also im Beispiel, wo Sie haben Alice das ist vertikal zentriert. Ich möchte, dass es valign = "top". Ist dies möglich, wenn die Google Visualisierungs -API verwendet wird?

Answer 1

Sie können die Elemente innerhalb des Org -Diagramms stylen. So hat ich es gemacht ...

Mein Fehler war zunächst, den CSS -Block über dem Google JavaScript -Code hinzuzufügen. Sobald ich es nach unten bewegt hatte, konnte ich so ziemlich jede visuelle Eigenschaft ändern.

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

Answer 2

Für diejenigen, die nach einer einfachen Open-Source-JavaScript-Organisationsdiagrammbibliothek suchen:

Ich habe gerade lib_gg_orgchart veröffentlicht. Es verwendet einen JSON -Eingang und zeichnet das Diagramm mit Raphael.

Schauen Sie sich die Website für einige Beispiele an und laden Sie sie herunter:

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

Wenn Sie es nützlich finden, lassen Sie es mich bitte wissen.

Answer 3

Ich bin mir nicht sicher, ob es eine einfache Möglichkeit gibt, dies mit Google API zu tun, aber Sie können dies mit einfachem CSS erreichen.

Anstatt von

['Alice', 'Mike', ''],

Du kannst schreiben

['<div style="height:50px;vertical-align:top">Alice</div>', 'Mike', ''],

Wenn Sie möchten, können Sie auch einen JavaScript -Code schreiben, um die Höhe dieser Zelle zu berechnen und dem Div -Tag dieser Zelle zuzuweisen.

BEARBEITEN: Wenn Sie das TD -Element vertikal ausrichten möchten, können Sie ein benutzerdefiniertes CSS schreiben.

.google-visualization-orgchart-node {vertical-align:top;}

Answer 4

Elzo hatte einen Vorschlag, aber anstatt Valign: Top zu verwenden; Sie müssen vertikale Ausrichtung verwenden: oben wie unten

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

Answer 5

Sie können CSS mit der Zelle mit einstellen setProperty Funktion:

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