C'è comunque di allineare verticalmente le scatole in google org visualizzazione grafico

Question

google organigramma visualizzazione API e voglio avere il set di allineamento verticale in alto sulle cellule. (Sto mostrando più persone in ogni casella organigramma così voglio che ogni "livello" di adeguamento alla parte superiore invece che al centro. Quindi, nell'esempio, dove si ha Alice che è centrato verticalmente. I voglio che valign = "top". è questo possibile fare utilizzando le API di visualizzazione Google ??

Answer 1

È possibile lo stile degli elementi all'interno della organigramma. Ecco come ho fatto ...

Il mio errore in un primo momento è stato quello di aggiungere il blocco css sopra il codice di Google Javascript. Una volta mi sono spostato verso il basso, potrei cambiare praticamente qualsiasi proprietà visiva.

<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

Per chi cerca un semplice, open-source libreria javascript Organigramma:

Ho appena pubblicato lib_gg_orgchart. Esso utilizza un ingresso JSON e disegna il grafico utilizzando Raphael.

Date un'occhiata al sito per alcuni esempi e scaricare:

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

Se lo trovate utile, per favore fatemelo sapere.

Answer 3

Non sono sicuro se c'è un modo semplice per farlo con Google API, ma si può ottenere che, con un semplice CSS;

Al posto di

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

è possibile scrivere

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

Se si desidera, è possibile anche scrivere un codice JavaScript per calcolare l'altezza di quella cella e assegnarlo a tag div di quella cella.

Modifica Se si desidera allineare verticalmente l'elemento TD, è possibile scrivere un CSS personalizzato;

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

Answer 4

Elzo aveva un suggerimento, ma invece di utilizzare valign: top; è necessario utilizzare vertical-align: top come qui di seguito

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

Answer 5

È possibile regolare CSS da cellule con setProperty funzione:

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