Возникла необходимость вставить организационную диаграмму. Ну а вставлять просто картинку – не наш метод. Решил поискать “наш  метод” и нашёл – Google Organizational Chart API. Собственно о моих попытках и пойдёт речь.

Приведу сразу цитату из кода и результат его:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
          [{v:'ПГ', f:'ЗАО "Промышленная Группа ГАРО"'}, '', 'ЗАО «Промышленная Группа ГАРО» - головное предприятие, холдинговая компания смешанного типа']
          ,[{v:'НПД', f:'Научно-производственный дивизион'}, 'ПГ', '']
          ,[{v:'ЦИНУС', f:'ООО "ЦИНУС завода ГАРО"'}, 'НПД', 'ООО «Центр инженерных услуг завода ГАРО». Осуществляет разработку новых видов приборов и оборудования для технического контроля, диагностирования и ремонта автомобилей. Работает над улучшением потребительских свойств выпускаемой продукции для удовлетворения постоянно меняющихся потребностей рынков России и стран СНГ.']
          ,[{v:'НовГАРО', f:'ЗАО "НовГАРО"'}, 'НПД', 'Российско-американское совместное предприятие.']
          ,[{v:'КД', f:'Коммерческий дивизион'}, 'ПГ', '']
          ,[{v:'ПКФ', f:'ЗАО "ПКФ завода ГАРО"'}, 'КД', 'ЗАО "Производственно-коммерческая фирма завода ГАРО".']
          ,[{v:'Трейд', f:'ЗАО "ГАРО-Трейд"'}, 'КД', 'Маркетинг, продажи продукции Группы Компаний ГАРО, продажи продукции российских партнёров, продажи продукции зарубеждных партнёров, экспорт, обучение покупателей и дилеров.']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('garo_orgchart'));
        chart.draw(data, {allowHtml:true, allowCollapse:true});
      }
</script> <div id="garo_orgchart"></div>

Причём и сценарий, формирующий саму диаграмму, также может быть оформлен в виде отдельного файла, и грузить сценарии можно в “подвале”, чтобы не создавать дополнительных задержек при загрузке страниц. Но суть не в этом.

Вот так будет выглядеть результат:

  ЗАО "Промышленная Группа ГАРО"  
                                   
         
  Научно-производственный дивизион   Коммерческий дивизион  
                                     
                 
ООО "ЦИНУС завода ГАРО"   ЗАО "НовГАРО"   ЗАО "ПКФ завода ГАРО"   ЗАО "ГАРО-Трейд"

Согласитесь, на первый взгляд всё просто. У меня возникли проблемы с CSS, приведу исправленный вариант orgchart.css:

table.google-visualization-orgchart-table {
    BORDER-BOTTOM: 0px; TEXT-ALIGN: center; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px;
    width: auto;
}
table.google-visualization-orgchart-table *,
table.google-visualization-orgchart-table tr,
table.google-visualization-orgchart-table td,
table.google-visualization-orgchart-table th
{
    PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px;
    line-height: normal;
}
table.google-visualization-orgchart-table .google-visualization-orgchart-space-small {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 4px; HEIGHT: 1px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-space-medium {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 10px; HEIGHT: 1px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-space-large {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 16px; HEIGHT: 1px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-noderow-small {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; HEIGHT: 12px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-noderow-medium {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; HEIGHT: 30px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-noderow-large {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; HEIGHT: 46px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-connrow-small {
    HEIGHT: 2px; FONT-SIZE: 1px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-connrow-medium {
    HEIGHT: 6px; FONT-SIZE: 4px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-connrow-large {
    HEIGHT: 10px; FONT-SIZE: 8px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-node {
    BORDER-BOTTOM: #b5d9ea 2px solid; TEXT-ALIGN: center; BORDER-LEFT: #b5d9ea 2px solid; BACKGROUND-COLOR: #edf7ff; FONT-FAMILY: arial, helvetica; VERTICAL-ALIGN: middle; BORDER-TOP: #b5d9ea 2px solid; CURSOR: default; BORDER-RIGHT: #b5d9ea 2px solid; -moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px; -moz-border-radius: 5px; -webkit-border-radius: 5px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-nodesel {
    BORDER-BOTTOM: #e3ca4b 2px solid; BORDER-LEFT: #e3ca4b 2px solid; BACKGROUND-COLOR: #fff7ae; BORDER-TOP: #e3ca4b 2px solid; BORDER-RIGHT: #e3ca4b 2px solid
}
table.google-visualization-orgchart-table .google-visualization-orgchart-node-small {
    FONT-SIZE: 0.6em
}
table.google-visualization-orgchart-table .google-visualization-orgchart-node-medium {
    FONT-SIZE: 0.8em
}
table.google-visualization-orgchart-table .google-visualization-orgchart-node-large {
    FONT-SIZE: 1.2em; FONT-WEIGHT: bold
}
table.google-visualization-orgchart-table .google-visualization-orgchart-linenode {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
table.google-visualization-orgchart-table .google-visualization-orgchart-lineleft {
    BORDER-LEFT: #3388dd 1px solid
}
table.google-visualization-orgchart-table .google-visualization-orgchart-lineright {
    BORDER-RIGHT: #3388dd 1px solid
}
table.google-visualization-orgchart-table .google-visualization-orgchart-linebottom {
    BORDER-BOTTOM: #3388dd 1px solid
}

Как видно, во все селекторы добавил префикс table.google-visualization-orgchart-table, чтобы повысить приоритет правил, иначе любая тема wordpress подпортит внешний вид диаграмм.

Но и это не всё. Если в стилях Вашей темы Вы видите правила следующего вида:

#content table {
    ...
}

меняйте их на правила следующего вида (чтобы Ваш исправленный orgchart.css определял стили таблиц, использованных при отрисовке диаграмм, а не стили Вашей темы):

.entry-content table {
    ...
}

Естественно, конкретные стили и id определяются Вашей темой, пример приведён для темы из комплекта wordpress,но суть, я думаю, ясна.

Вот, собственно говоря, и всё.

Отзывы » (10)

  1. Леха:

    Не проще заменить #content table на #content table.className?

    И, кстати, в оригинальном файле стилей используется сокращенная форма записи правил (border: 0;), а у вас длиннющие строки зачем-то BORDER-BOTTOM: 0px; TEXT-ALIGN: center; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px

    • Боюсь Вас огорчить, но файл — оригинальный, от даты публикации. Правил только селекторы, как и указал. Из стилей добавил только line-height, больше ничего.
      Но суть, в любом случае, не в стилях, а именно — в селекторах. Слабоваты они, я бы сказал — слабже некуда. И, честно говоря, я не очень понимаю, что мешало разработчикам усилить их хотя бы так, как в статье описано. Иначе интегрировать диаграммы в уже существующий сайт становится делом неприятным…

    • По поводу #content table: подобного рода правила используются многими существующими темами wordpress. И их все переписывать? Да и в содержимом статей таблицы без класса, ещё и статьи придётся переписывать. А вот поправить стили для диаграммы можно один раз — и не придётся править статьи и темы.

      • Леха:

        Вот смотрите, этот код работает с оригинальной библиотекой, без правок:

        #content {
        width: 100%;
        }

        #content table.className {
        border-collapse: collapse;
        margin: auto;
        paddng: 0;
        border: solid 1px red;
        font-size: 22px;

        }
        #content table.className td {
        margin: 0;
        padding: 3px;
        border: solid 1px red;
        }
        #content table.className tfoot td {
        text-align: center;
        }
        .content table {
        border-collapse: collapse;
        border: solid 1px red;
        font-size: 22px;
        }

        google.load('visualization', '1', {packages:['orgchart']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
        [{v:'Mike', f:'MikePresident'}, '', 'The President'],
        [{v:'Jim', f:'JimVice President'}, 'Mike', 'VP'],
        ['Alice', 'Mike', ''],
        ['Bob', 'Jim', 'Bob Sponge'],
        ['Carol', 'Bob', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
        }


        Имя

        Расчет закончен

        1
        Вася

        2
        Петя

        3
        Маша

        Т.е. не нужно править css стороннего разработчика, размещать на своем сайте и т.п.

        • Леха:

          Не пойму, как тут код вставлять. Выложил пример сюда вот http://akseoma.ru/test2.html

        • Да я прекрасно понял Ваше предложение. Я писал о следующем:
          - при использовании различных тем к wordpress разработчики тем определяют css, при этом, зачастую, используют селекторы типа #content table, или даже table. Разработчики не предъявляют требованию по использованию классов к авторам статей wordpress, что правильно с точки зрения архитектуры wordpress.
          Поэтому Ваше предложение не подходит ко многим CMS, в том числе — и к wordpress. И своё я решение я и привёл именно для случая использования в статьях на сайтах на CMS wordpress.

          • Леха:

            Мне кажется, на уровне разработчика исправление таблицы стилей, шаблона страницы, в конце концов шаблонов визуального редактора (что позволит пользователям не запариваться по поводу стилей) не являются неразрешимой проблемой. Без особой разницы, какая именно используется система управления контентом. Возможны, конечно, проблемы, но больше на уровне конфликта имен js (библиотек mootools и jquery, к примеру), а не с таблицами стилей.

            Опять же, Ваш способ (если я его правильно понял, конечно) у меня не получилось заставить работать, вот http://akseoma.ru/test3.html

        • Алексей, я же пишу про конкретную CMS – wordpress. Где есть конкретные рекомендации по разработке стилей тем. О них и пишу. Это первое.
          Второе. У Вас не получилось по одной причине – необходимо ещё переопределить стили для самой диаграммы, как я и описал в статье (селекторы необходимо исправить, как и описано). И эта необходимость связана именно с недоработкой, на мой взгляд, разработчиков API организационных диаграмм – уж слишком слабые селекторы в стилях использованы, хотя ничего не мешало их усилить, что я и предлагаю сделать.
          Включите в Ваш пример переопределённые стили диаграммы – и у Вас всё получится.

Опубликовать комментарий

XHTML: Вы можете использовать следующие HTML теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags Связь с комментариями статьи:
RSS комментарии
Обратная ссылка