Есть ли в любом случае, чтобы выровнять по вертикали поля в Google Org Chart визуализации

Question

Я использую API визуализации Google Org , и я хочу, чтобы вертикальное выравнивание было установлено сверху в ячейках. (Я показываю несколько человек в каждом окне оргструктуры, поэтому я хочу, чтобы каждый «уровень» выровнялся по верху, а не по середине. Так что в примере, где у вас есть Алиса , которая расположена вертикально по центру. Я хочу это valign = "top". это можно сделать с помощью API визуализации Google ??

Answer 1

Вы можете стилизовать элементы внутри оргструктуры. Вот как я это сделал ...

Сначала я ошибся, добавив блок css над кодом Google Javascript. Переместив его вниз, я смог изменить практически любое визуальное свойство.

<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

Для тех, кто ищет простую библиотеку организационных диаграмм с открытым исходным кодом Javascript:

Я только что опубликовал lib_gg_orgchart.Он использует JSON-ввод и рисует диаграмму, используя Рафаэля.

Посмотрите на сайт несколько примеров и загрузите:

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

Если вы найдете это полезнымПожалуйста, дайте мне знать.

Answer 3

Я не уверен, есть ли простой способ сделать это с помощью 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;}

Answer 4

У Эльзо было предложение, но вместо использования valign: top; вам нужно использовать выравнивание по вертикали: верх как показано ниже

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

Answer 5

Вы можете настроить CSS по ячейке с помощью функции setProperty :

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