est là de toute façon à aligner verticalement les cases dans la visualisation graphique de Google

Question

J'utilise google API de visualisation organigramme et je veux avoir l'ensemble d'alignement vertical vers le haut sur les cellules. (Je montre plusieurs personnes dans chaque boîte organigramme donc je veux que chaque « niveau » d'aligner vers le haut au lieu du milieu. Ainsi, dans l'exemple, où vous avez Alice qui est centré verticalement. I veulent à valign = "top". est-ce possible de le faire en utilisant la visualisation google api ??

Answer 1

Vous pouvez définir le style des éléments au sein de l'organigramme. Voici comment je l'ai fait ...

Mon erreur était d'abord d'ajouter le bloc css au-dessus du code Google Javascript. Une fois que je l'ai déplacé vers le bas, je pouvais changer à peu près toute propriété visuelle.

<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

Pour ceux qui recherchent un moyen simple, open-source Javascript bibliothèque Organigramme:

Je viens de publier lib_gg_orgchart. Il utilise une entrée JSON et dessine le graphique à l'aide Raphaël.

Jetez un coup d'oeil sur le site pour quelques exemples et téléchargement:

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

Si vous le trouvez utile, s'il vous plaît laissez-moi savoir.

Answer 3

Je ne sais pas s'il y a un moyen simple de le faire avec l'API Google, mais vous pouvez y parvenir avec CSS simple:

Au lieu de

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

vous pouvez écrire

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

Si vous voulez, vous pouvez également écrire un code JavaScript pour calculer la taille de cette cellule et l'affecter à la balise div de cette cellule.

EDIT: Si vous souhaitez aligner verticalement l'élément TD, vous pouvez écrire un CSS personnalisé;

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

Answer 4

Elzo avait une suggestion, mais au lieu d'utiliser valign: top; vous devez utiliser vertical-align: top comme ci-dessous

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

Answer 5

Vous pouvez régler CSS par cellule avec setProperty fonction:

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