web-dev-qa-db-fra.com

Existe-t-il de meilleurs organigrammes javascript par rapport à l'API Google Org Chart?

Nous utilisons/ Google organigramme API pour afficher nos organigrammes . Cela fonctionne bien mais nous avons besoin de quelque chose qui supporte:

  1. Une personne relevant de plusieurs gestionnaires
  2. Co chefs de domaines fonctionnels.

Existe-t-il des outils concurrents offrant un meilleur support pour ce qui précède?.

NOTE: Pour Gorka LLona, qui a suggéré cette solution ci-dessous dans l'une des réponses, j'ai trouvé quelques bugs, voici une capture d'écran du problème que je rencontre en utilisant votre exemple de test.

enter image description here

javascriptgoogle-visualizationorgchart
58
leora

Vous pouvez utiliser Jit (The JavaScript Infoviz Toolkit), il y a un bon exemple ici . C’est ce que j’avais utilisé pour créer un organigramme dans mon entreprise (soutenu par un script PHP transformant les relations AD en JSON).

26
Beau

D3 - http://d3js.org/

Voici un exemple - ils sont un peu difficiles à trouver 

http://bl.ocks.org/1061834

25
James Westgate

Je ne sais pas si vous cherchez toujours, vu que c'est âgé de 2 ans, mais je suis dans la même situation et j'ai trouvé ceci:

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

Quelques autres que j'ai trouvés:

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

Organigrammes utilisant JS http://jvloenen.home.xs4all.nl/orgchart/

J'ai fini par utiliser D3.js pour le faire. J'utilise leur TreeLayout et l'ai édité pour répondre à mes besoins. Voici un exemple de code:

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 + ")");

Voici un jsFiddle de ce que j'ai commencé: http://jsfiddle.net/augburto/YMa2y/

18
aug

En bref, @Cam a raison, mais vous n'avez pas nécessairement besoin de regarder Silverlight ou Flash. Je recommanderais de regarder dans la bibliothèque Raphael.js . C'est plus bas niveau que ce que vous semblez être après, mais l'API est assez simple.

En particulier, l’exemple Graffle serait un bon point de départ.

6
Horatio Alderaan

Pour ceux qui recherchent une bibliothèque d'organigrammes Javascript simple et open-source:

Je viens de publier lib_gg_orgchart. Il utilise une entrée JSON et dessine le graphique à l'aide de Raphael.

Cette bibliothèque répond aux exigences n ° 1 et n ° 2 de la question initiale.

Jetez un coup d’œil sur le site pour quelques exemples et téléchargez:

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

Si vous le trouvez utile, s'il vous plaît faites le moi savoir.

4
Gorka Llona

La nouvelle page d’accueil de lib_gg_orgchart est http://librerias.logicas.org/lib_gg_orgchart . Je mets ici les informations anciennes: Pour ceux qui recherchent une bibliothèque d'organigrammes Javascript simple et open-source: Je viens de publier lib_gg_orgchart. Il utilise une entrée JSON et dessine le graphique à l'aide de Raphael. Jetez un coup d’œil sur le site pour quelques exemples et téléchargez-le. Si vous le trouvez utile, s'il vous plaît faites le moi savoir. Une nouvelle version viendra bientôt, corrigeant quelques bugs et intégrant les modifications du collaborateur.

4
Gorka Llona

Dans un scénario commercial yFiles for HTML fournit certainement la flexibilité requise:

Il existe un organigramme simple - démo en ligne qui montre comment cela peut être implémenté avec la bibliothèque (qui est en fait une bibliothèque de dessins de graphes à usage général):

 Organization Chart Demo Screenshot

Les algorithmes de mise en page automatiques de la bibliothèque peuvent à la fois traiter de structures arborescentes purement hiérarchiques, mais peuvent également traiter de structures "arborescentes", où les éléments peuvent avoir plusieurs parents, par exemple. pour modéliser une équipe de direction ou plusieurs sociétés mères. 

La bibliothèque possède également des algorithmes de mise en page pouvant traiter des graphes génériques avec une complexité cyclique arbitraire et avec les algorithmes de routage Edge disponibles, même les cas rares Edge peuvent être visualisés correctement, où des arêtes n'appartenant pas à la structure arborescente hiérarchique stricte peuvent être routées aussi (par exemple pour indiquer une couche supplémentaire de relations) - cela ne fait pas partie de la démo liée ci-dessus, bien que, au moment de l'écriture. Le plus générique layout demo montre cependant plusieurs algorithmes de layout et beaucoup de leurs options en action.

Déni de responsabilité: Je travaille pour la société qui crée cette bibliothèque, mais je ne représente pas mon employeur le SO. Mes commentaires, réflexions et réponses sont les miennes.

2
Sebastian

Si vous cherchez des alternatives qui fonctionnent comme un service comme google, je ne pense pas que vous en ayez. Si vous recherchez des bibliothèques (js, php, flash) pouvant créer ces graphiques pour vous (vous pouvez installer les bibliothèques sur un serveur et créer une interface simple pour créer les objets graphiques), vous pouvez rechercher des anciens messages dans SO ou en en recherchant des articles de blog dans Google .

Si vous ne vous intéressez qu'à un organigramme créateur, rien que pour faire avancer le travail Les solutions de Creately à mon avis. Si vous avez besoin de créer un seul diagramme et que vous ne voulez pas payer pour cela, vous pouvez utiliser Lovely Charts .

1
GmonC

Www.orgchartasp.net vous aidera également à créer/afficher des organigrammes 

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx (avec les images en haut)

http://orgchartasp.net/Sample1.aspx (avec des images à gauche)

c'est une bibliothèque .net qui vous aidera à construire la hiérarchie sur le backend et javascript du côté client.

1
Chandra Sekhar Walajapet

Vous pouvez implémenter une solution avec Graphviz et Javascript. Graphviz gère facilement ces trois conditions. Créez le graphique dans graphviz et faites-le afficher au format SVG. À partir de là, lancez du javascript dessus. Par exemple, un arbre généalogique partiel de Charlemagne , qui est essentiellement un organigramme extraordinairement complexe.

1
Dan

Vous pouvez utiliser un trie: https://github.com/mikedeboer/trie ou https://github.com/odhyan/trie Mootools a également MIF.Tree: http: // mootools.net/forge/p/mif_tree , qui affiche les arborescences

1
peterhil

Bonjour ooo

Je vais garder ça court. Non il n'y en a pas. Pas avec Javascript quand même. Vous pourriez trouver http://www.cogmap.com/ intéressant, mais vous ne pouvez pas l'utiliser comme contrôle sur vos propres pages.

Personnellement, je regarderais certains des médias intégrés riches tels que Silverlight ou Flash. C'est une option pour toi?

Came

0
Cam