¿De todos modos, alinear verticalmente las cajas en la visualización de Google Org Chart?

Question

estoy usando API de visualización de la tabla de organización de Google Y quiero tener la alineación vertical establecida en la parte superior en las células. (Estoy mostrando a varias personas en cada cuadro de gráfico de org, así que quiero que cada "nivel" se alinee en la parte superior en lugar del medio. Entonces, en el ejemplo, donde tienes Alicia que está centrado verticalmente. Quiero que valign = "top". ¿Es esto posible usar la API de visualización de Google?

Answer 1

Puede diseñar los elementos dentro del organigrama. Así es como lo hice ...

Mi error al principio fue agregar el bloque CSS sobre el código de Google JavaScript. Una vez que lo moví hacia abajo, podría cambiar casi cualquier propiedad visual.

<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

Para aquellos que buscan una biblioteca de organización organizacional JavaScript simple y de código abierto:

Acabo de publicar lib_gg_orgchart. Utiliza una entrada JSON y dibuja el gráfico usando Raphael.

Eche un vistazo al sitio para obtener algunos ejemplos y descargue:

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

Si lo encuentra útil, hágamelo saber.

Answer 3

No estoy seguro de si hay una manera simple de hacerlo con Google API, pero puede lograrlo con CSS simple;

En vez de

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

puedes escribir

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

Si lo desea, también puede escribir un código JavaScript para calcular la altura de esa celda y asignarlo a la etiqueta DIV de esa celda.

EDITAR: Si desea alinear verticalmente el elemento TD, puede escribir un CSS personalizado;

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

Answer 4

Elzo tenía una sugerencia pero en lugar de usar Valign: Top; Necesitas usar vertical-aline

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

Answer 5

Puede ajustar CSS por celda con setProperty función:

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