Есть ли лучшие javascript org диаграммы по сравнению с Google Org Chart API?

Мы используем API диаграммы google org для отображения наших диаграмм org. Это работает хорошо, но нам нужно что-то, что поддерживает:

Один человек, сообщающий нескольким менеджерам
Co руководители функциональных областей.

Существуют ли какие-либо конкурирующие инструменты, которые лучше поддерживают вышеуказанное.

ПРИМЕЧАНИЕ. Для Gorka LLona, который предложил это решение ниже в одном из ответов, я нашел несколько ошибок, вот скриншот проблемы, с которой я столкнулся, используя ваш тестовый пример.

Ответ 1

Вы можете использовать Jit (Инструмент JavaScript Infoviz Toolkit), вот хороший пример здесь. Это то, что я использовал для создания организационной диаграммы в моей компании (при поддержке PHP script, которая превращает отношения AD в JSON).

Ответ 2

D3 - http://d3js.org/

Вот пример - их немного сложно найти

http://bl.ocks.org/1061834

Ответ 3

Не уверен, что вы все еще смотрите на то, что это 2 года, но я в той же ситуации и нашел это:

yFILES http://live.yworks.com/demobrowser/index.html#Organization-Charts

Некоторые другие, которые я нашел:

jOrgChart http://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html

Организация диаграмм с использованием JS http://jvloenen.home.xs4all.nl/orgchart/

В итоге я использовал D3.js для этого. Я использую их TreeLayout и отредактировал его в соответствии с моими потребностями. Вот пример кода:

var tree = d3.layout.tree().nodeSize([70, 40]);
var diagonal = d3.svg.diagonal()
    .projection(function (d) {
    return [d.x + rectW / 2, d.y + rectH / 2];
});

var svg = d3.select("#body").append("svg").attr("width", 1000)
    .attr("height", 1000).append("g")
    .attr("transform", "translate(" + 350 + "," + 20 + ")");

Вот jsFiddle того, что я начал: http://jsfiddle.net/augburto/YMa2y/

Ответ 4

Короче @Cam прав, но вам необязательно смотреть на Silverlight или Flash. Я бы рекомендовал заглянуть в библиотеку Raphael.js. Это более низкий уровень, чем вы, кажется, после, но API довольно прост.

В частности, хороший пример для Graffle.

Ответ 5

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

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

Эта библиотека удовлетворяет требованиям №1 и №2 исходного вопроса.

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

http://librerias.logicas.org/lib_gg_orgchart/index.html

Если вы сочтете это полезным, сообщите мне.

Ответ 6

Новый веб-сайт для lib_gg_orgchart http://librerias.logicas.org/lib_gg_orgchart. Я поставил здесь старую информацию: для тех, кто ищет простую библиотеку организационных диаграмм Javascript с открытым исходным кодом: я только что опубликовал lib_gg_orgchart. Он использует вход JSON и рисует диаграмму с помощью Raphael. Посмотрите на сайт для некоторых примеров и загрузите. Если вы сочтете это полезным, сообщите мне. Новая версия скоро появится, исправление некоторых ошибок и интеграция изменений соавторов.

Ответ 7

Я бы предложил orgplot.codeplex.com, однако он полагается на холст HTML5.

Два примера:

см. их быстрые примеры кода на вкладке документации @над сайтом.

Ответ 8

В коммерческом сценарии yFiles для HTML, безусловно, обеспечивает необходимую гибкость:

Существует простая организационная диаграмма демо онлайн, которая показывает, как это можно реализовать с помощью библиотеки (которая на самом деле является графиком общего назначения библиотека рисования):

Алгоритмы автоматической компоновки в библиотеке могут иметь дело с чисто иерархическими древовидными структурами, но также могут иметь дело с структурами "около дерева", где элементы могут иметь несколько родителей, например. для моделирования команды управления или нескольких материнских компаний.

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

Отказ от ответственности: я работаю в компании, которая создает эту библиотеку, однако на SO я не представляю своего работодателя. Мои комментарии, мысли и ответы - мои собственные.

Ответ 9

Если вы ищете альтернативы, которые работают как служба, например, google, я не думаю, что у вас есть. Если вы ищете библиотеки (js, php, flash), которые могут создавать эти диаграммы для вас (вы можете установить libs на сервере и создать простой интерфейс для создания объектов диаграммы), вы можете выполнить поиск более старые сообщения в SO или поиск некоторых сообщений в блоге в Google.

Если вас интересует только Org Chart создатель, просто для выполнения этой работы ничего не будет Creately solutions по-моему. Если вам нужно создать только одну диаграмму и не хотите платить за нее, вы можете использовать Lovely Charts.

Ответ 10

Вы можете реализовать решение с Graphviz и Javascript. Graphviz легко справляется со всеми тремя вашими условиями. Создайте график в Graphviz и получите его в формате SVG. Оттуда, бросьте на него некоторый javascript. Например, частичное семейное древо Карла Великого, которое по сути представляет собой чрезвычайно сложную организационную диаграмму.

Ответ 11

Вы можете использовать trie: https://github.com/mikedeboer/trie или https://github.com/odhyan/trie Mootools также имеет MIF.Tree: http://mootools.net/forge/p/mif_tree, который отображает древовидные структуры

Ответ 12

Хорошо www.orgchartasp.net также поможет вам создавать/просматривать орг-карты

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx (с изображениями сверху)

http://orgchartasp.net/Sample1.aspx (с изображениями слева)

это библиотека .net, которая поможет вам создать иерархию на бэкэнд и javascript на стороне клиента.

Ответ 13

G'Day ooo

Я буду держать это в курсе. Нет, нет. В любом случае, не с Javascript. Вы можете найти http://www.cogmap.com/, но это не то, что вы можете использовать в качестве элемента управления на своих собственных страницах.

Лично я бы посмотрел на некоторые из богатых встроенных медиа, таких как Silverlight или Flash. Это вариант для вас?

Кулачковые

Ответ 14

Я также использую API диаграммы google org, чтобы отображать наши организационные диаграммы. https://developers.google.com/chart/interactive/docs/examples

Это работает хорошо, но нам нужно что-то, что поддерживает:

1) Источник - это документ Google Spreadsheet, в котором хранятся данные для организационной диаграммы. 2) Когда новый пользователь добавляется к данным, создается новый node. 3) Горизонтальная компоновка для 1-го и 2-го уровней, а также вертикальные макеты более низких уровней. Аналогично этому: http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&inline=1

1 и 2 поддерживаются Google и работают отлично, но что-то нужно для этого 3-го требования (горизонтальные и вертикальные макеты)