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

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

Источник

5 ответов

Решение

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

Сначала я ошибся, добавив блок 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>
Источник

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

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

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

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

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

Источник

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

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

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

Источник

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

// for 0 row 0 column
data.setProperty(0, 0, "style", "valign:top;");
Источник
Другие вопросы по тегам