Мы используем API диаграммы google org для отображения наших диаграмм org. Это работает хорошо, но нам нужно что-то, что поддерживает:
Существуют ли какие-либо конкурирующие инструменты, которые лучше поддерживают вышеуказанное.
ПРИМЕЧАНИЕ. Для Gorka LLona, который предложил это решение ниже в одном из ответов, я нашел несколько ошибок, вот скриншот проблемы, с которой я столкнулся, используя ваш тестовый пример.
Вы можете использовать Jit (Инструмент JavaScript Infoviz Toolkit), вот хороший пример здесь. Это то, что я использовал для создания организационной диаграммы в моей компании (при поддержке PHP script, которая превращает отношения AD в JSON).
D3 - http://d3js.org/
Вот пример - их немного сложно найти
Не уверен, что вы все еще смотрите на то, что это 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/
Короче @Cam прав, но вам необязательно смотреть на Silverlight или Flash. Я бы рекомендовал заглянуть в библиотеку Raphael.js. Это более низкий уровень, чем вы, кажется, после, но API довольно прост.
В частности, хороший пример для Graffle.
Для тех, кто ищет простую библиотеку организационных диаграмм Javascript с открытым исходным кодом:
Я только что опубликовал lib_gg_orgchart. Он использует вход JSON и рисует диаграмму с помощью Raphael.
Эта библиотека удовлетворяет требованиям №1 и №2 исходного вопроса.
Посмотрите на сайт для некоторых примеров и загрузите:
http://librerias.logicas.org/lib_gg_orgchart/index.html
Если вы сочтете это полезным, сообщите мне.
Новый веб-сайт для lib_gg_orgchart http://librerias.logicas.org/lib_gg_orgchart. Я поставил здесь старую информацию: для тех, кто ищет простую библиотеку организационных диаграмм Javascript с открытым исходным кодом: я только что опубликовал lib_gg_orgchart. Он использует вход JSON и рисует диаграмму с помощью Raphael. Посмотрите на сайт для некоторых примеров и загрузите. Если вы сочтете это полезным, сообщите мне. Новая версия скоро появится, исправление некоторых ошибок и интеграция изменений соавторов.
Я бы предложил orgplot.codeplex.com, однако он полагается на холст HTML5.
Два примера:
см. их быстрые примеры кода на вкладке документации @над сайтом.
В коммерческом сценарии yFiles для HTML, безусловно, обеспечивает необходимую гибкость:
Существует простая организационная диаграмма демо онлайн, которая показывает, как это можно реализовать с помощью библиотеки (которая на самом деле является графиком общего назначения библиотека рисования):
Алгоритмы автоматической компоновки в библиотеке могут иметь дело с чисто иерархическими древовидными структурами, но также могут иметь дело с структурами "около дерева", где элементы могут иметь несколько родителей, например. для моделирования команды управления или нескольких материнских компаний.
В библиотеке также есть алгоритмы компоновки, которые могут обрабатывать общие графики с произвольной циклической сложностью и с доступными алгоритмами маршрутизации кромок, даже редкие случаи края могут быть визуализированы красиво, где ребра, которые не относятся к строгой иерархической древовидной структуре, могут (например, для указания дополнительного слоя отношений) - это не часть демо, связанная выше, хотя на момент написания. Более общая макетная демонстрация показывает несколько алгоритмов компоновки и многие их варианты в действии.
Отказ от ответственности: я работаю в компании, которая создает эту библиотеку, однако на SO я не представляю своего работодателя. Мои комментарии, мысли и ответы - мои собственные.
Если вы ищете альтернативы, которые работают как служба, например, google, я не думаю, что у вас есть. Если вы ищете библиотеки (js, php, flash), которые могут создавать эти диаграммы для вас (вы можете установить libs на сервере и создать простой интерфейс для создания объектов диаграммы), вы можете выполнить поиск более старые сообщения в SO или поиск некоторых сообщений в блоге в Google.
Если вас интересует только Org Chart создатель, просто для выполнения этой работы ничего не будет Creately solutions по-моему. Если вам нужно создать только одну диаграмму и не хотите платить за нее, вы можете использовать Lovely Charts.
Вы можете реализовать решение с Graphviz и Javascript. Graphviz легко справляется со всеми тремя вашими условиями. Создайте график в Graphviz и получите его в формате SVG. Оттуда, бросьте на него некоторый javascript. Например, частичное семейное древо Карла Великого, которое по сути представляет собой чрезвычайно сложную организационную диаграмму.
Вы можете использовать trie: https://github.com/mikedeboer/trie или https://github.com/odhyan/trie Mootools также имеет MIF.Tree: http://mootools.net/forge/p/mif_tree, который отображает древовидные структуры
Хорошо www.orgchartasp.net также поможет вам создавать/просматривать орг-карты
http://orgchartasp.net/Sample.aspx
http://orgchartasp.net/Sample1.aspx (с изображениями сверху)
http://orgchartasp.net/Sample1.aspx (с изображениями слева)
это библиотека .net, которая поможет вам создать иерархию на бэкэнд и javascript на стороне клиента.
G'Day ooo
Я буду держать это в курсе. Нет, нет. В любом случае, не с Javascript. Вы можете найти http://www.cogmap.com/, но это не то, что вы можете использовать в качестве элемента управления на своих собственных страницах.
Лично я бы посмотрел на некоторые из богатых встроенных медиа, таких как Silverlight или Flash. Это вариант для вас?
Кулачковые
Я также использую 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-го требования (горизонтальные и вертикальные макеты)
