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

Question

Я использую Google Org диаграмма визуализации API И я хочу, чтобы вертикальное выравнивание было нанесено на вершину клеток. (Я показываю несколько человек в каждой карте орг, поэтому я хочу, чтобы каждый «уровень» выровнялся до вершины, а не в середине. Итак, в примере, где у вас есть Алиса который вертикально центрирован. Я хочу, чтобы это 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

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

Я только что опубликовал lib_gg_orgchart. Он использует вход JSON и рисует диаграмму с помощью Raphael.

Взгляните на сайт для некоторых примеров и загрузите:

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, чтобы вычислить высоту этой ячейки и назначить его тегу этой ячейки.

РЕДАКТИРОВАТЬ: Если вы хотите вертикально выровнять элемент 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;");