Existem melhores gráficos de org do javascript em comparação com a API do Google Org Chart? [fechado]

estamos a usar a API do google org chart para mostrar os nossos gráficos do org. Isto funciona bem, mas precisamos de algo que suporte:

  1. uma pessoa reportando a vários gestores
  2. Chefe de uma área funcional.
Existem ferramentas concorrentes que dão melhor suporte para o acima.


Nota: para Gorka LLona, que sugeriu esta solução abaixo em uma das respostas, eu encontrei alguns bugs, aqui está uma imagem do problema em que estou correndo usando o seu exemplo de teste.

enter image description here

Author: leora, 2010-10-13

13 answers

Você poderia usar o Jit (o JavaScript Infoviz Toolkit), Existe um bom exemplo aqui . Isto é o que eu usei para criar um organograma na minha empresa (apoiado por um script PHP que transforma relações de AD em JSON).

 26
Author: Beau, 2011-01-19 00:47:44

D3 - http://d3js.org/

Aqui está um exemplo - eles são um pouco difíceis de encontrar

Http://bl.ocks.org/1061834

 25
Author: James Westgate, 2012-08-03 11:25:50
Não sei se ainda estás à procura, tendo em conta que isto tem 2 anos, mas estou na mesma situação e encontrei isto:

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

Alguns outros encontrei:

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

Organigrama com JS http://jvloenen.home.xs4all.nl/orgchart/

Acabei por usar D3.js to fá-lo. Uso o TreeLayout deles e editei-o para satisfazer as minhas necessidades. Aqui está um código de exemplo:

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 + ")");
Aqui está um jsFiddle do que eu comecei: http://jsfiddle.net/augburto/YMa2y/
 18
Author: aug, 2015-04-27 12:41:49
Em resumo @Cam está certo, mas você não precisa necessariamente olhar para a luz prateada ou Flash. Recomendo que investigues o Raphael.biblioteca js. É mais baixo do que o que pareces querer, mas a API é muito simples.

Em particular o exemplo Graffle {[3] } seria um bom lugar para começar.

 6
Author: Horatio Alderaan, 2010-10-27 01:33:07

A nova web home para a lib_ gg_orgchart é http://librerias.logicas.org/lib_gg_orgchart . coloquei aqui a informação antiga: para aqueles que procuram uma simples biblioteca de gráficos organizacionais Javascript de código aberto: acabei de publicar o lib_ gg_orgchart. Ele usa uma entrada JSON e desenha o gráfico usando Raphael. Dê uma olhada no site para alguns exemplos e baixar. Se achar útil, por favor, avise-me. A nova versão virá em breve, corrigindo alguns bugs e integrando as mudanças de colaborador.

 4
Author: Gorka Llona, 2013-02-04 14:50:45

Para aqueles que procuram uma biblioteca de gráficos organizacionais em Javascript simples e de código aberto:

Acabei de publicar a lib_gg_orgchart. Ele usa uma entrada JSON e desenha o gráfico usando Raphael.

Esta biblioteca satisfaz os requisitos #1 e # 2 da pergunta original.

Dê uma olhada no site para alguns exemplos e baixar:

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

Se achar útil, por favor, avise-me.
 4
Author: Gorka Llona, 2014-03-09 01:50:09

Num cenário comercial os ficheiros yFiles para HTML proporcionam certamente a flexibilidade necessária:

Existe um gráfico de organização simples demo online que mostra como isto pode ser implementado com a biblioteca (que é de facto uma biblioteca de desenho de grafos de propósito geral):

Organization Chart Demo Screenshot

Os algoritmos de layout automáticos na biblioteca podem lidar com estruturas de árvore puramente hierarquizadas, mas também podem lidar com estruturas de "perto de árvore", onde os elementos pode ter vários pais, por exemplo, para modelar uma equipe de gestão ou várias empresas-mãe.

A biblioteca também possui layout de algoritmos que podem lidar com genérico gráficos arbitrários cíclica complexidade e com a borda algoritmos de roteamento disponíveis, mesmo raros casos extremos pode ser visualizado perfeitamente, onde as bordas que não pertencem à estrita árvore hierárquica-estrutura pode ser encaminhado, também, (e.g. para indicar uma camada adicional de relacionamentos) - isso não é parte da demo do link acima, no entanto, no momento da escrita. A demonstração de layout mais genérica no entanto mostra vários algoritmos de layout e muitas de suas opções em ação.

Disclaimer : Eu trabalho para a empresa que cria essa biblioteca, no entanto, para que eu não represento o meu empregador. Meus comentários, pensamentos e respostas são meus.

 2
Author: Sebastian, 2015-10-12 13:46:11

Se procura alternativas que funcionem como um serviço como o google faz, acho que não tem nenhuma. Se estiver à procura de bibliotecas (js, php, flash) que possam criar estes gráficos para si (poderá instalar as bibliotecas num servidor e criar uma interface simples para criar os objectos de gráficos), poderá procurar por publicações mais antigas no SO ou por à procura de algumas publicações no google.

Se só está interessado num Organigrama Criador , só para obter o trabalho feito, nada bate as soluções de Creately {[[5]} na minha opinião. Se você precisa criar apenas um diagrama, e não quer pagar por ele, você pode usar Gráficos bonitos .

 1
Author: GmonC, 2017-05-23 12:10:32

Você pode implementar uma solução com Graphviz e Javascript. Graphviz facilmente lida com todas as suas três condições. Crie o grafo em graphviz, e o faça sair no formato SVG. A partir daí, atira-lhe javascript. Por exemplo, uma árvore genealógica parcial de Carlos Magno, que é essencialmente um organograma extraordinariamente complexo.

 1
Author: Dan, 2011-05-30 23:54:23

Você pode usar uma trie: https://github.com/mikedeboer/trie ou https://github.com/odhyan/trie Mootools também tem MIF.Árvore: http://mootools.net/forge/p/mif_tree , que apresenta estruturas em árvores

 1
Author: peterhil, 2011-05-31 10:40:21
Bem ... www.orgchartasp.net irá também ajudá-lo a compilar / ver orgcharts

Http://orgchartasp.net/Sample.aspx

Http://orgchartasp.net/Sample1.aspx (com imagens no topo)

Http://orgchartasp.net/Sample1.aspx (com imagens à esquerda)

Esta é uma biblioteca.net que irá ajudá-lo a construir a hierarquia na infra-estrutura e javascript do lado do cliente.

 1
Author: Chandra Sekhar Walajapet, 2012-10-18 16:54:08

Também estou a usar a API do google org chart para mostrar os nossos gráficos do org. https://developers.google.com/chart/interactive/docs/examples

Isto funciona bem, mas precisamos de algo que suporte:

1) O Source é um documento de folha de cálculo do Google que contém os dados do organigrama. 2) Quando uma nova pessoa é adicionada aos dados, um novo nó é criado. 3) disposição Horizontal para o 1º e 2º níveis, bem como disposição vertical níveis inferiores. Semelhante presente: http://google-visualization-api-issues.googlecode.com/issues/attachment?aid=8730161231813373288&name=orgchart.png&token=RT7QPbsD-WkveIgybTZyXi48g84%3A1361392544450&inline=1

1 e 2 são suportados pelo Google e funcionam bem, mas precisam de algo para esse requisito 3 (disposições horizontais e verticais)

 -2
Author: user2093023, 2013-02-20 20:57:55