web-dev-qa-db-ja.com

Google Org Chart APIと比較して、より良いjavascript組織図はありますか？

Google組織図APIを使用して組織図を表示しています 。これはうまく機能しますが、次をサポートするものが必要です。

  1. 複数のマネージャーに報告する1人
  2. 機能分野の共同責任者。

上記のサポートを強化する競合ツールはありますか？.

注：回答の1つでこの解決策を提案したGorka LLonaの場合、いくつかのバグが見つかりました。テスト例を使用して実行している問題のスクリーンショットを次に示します。

enter image description here

javascriptgoogle-visualizationorgchart
60
leora

Jit（JavaScript Infoviz Toolkit）を使用できます ここに良い例があります 。これは私の会社で組織図を作成するために使用したものです（AD関係をJSONに変換するPHPスクリプトによって裏付けられています）。

26
Beau

D3- http://d3js.org/

ここに例があります-彼らは見つけるのが少し難しいです

http://bl.ocks.org/1061834

25
James Westgate

あなたはまだこれが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/

18
aug

要するに@Camは正しいのですが、必ずしもSilverlightやFlashを見る必要はありません。 Raphael.js ライブラリを調べることをお勧めします。あなたが思っているよりも低レベルですが、APIは非常にシンプルです。

特に、 Graffleの例 を開始するのに適しています。

6
Horatio Alderaan

シンプルでオープンソースのJavascript組織図ライブラリをお探しの場合：

Lib_gg_orgchartを公開しました。 JSON入力を使用し、Raphaelを使用してチャートを描画します。

このライブラリは、元の質問の要件＃1および＃2を満たします。

いくつかの例についてはサイトを見て、ダウンロードしてください：

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

便利だと思ったら教えてください。

4
Gorka Llona

Lib_gg_orgchartの新しいWebホームは http://librerias.logicas.org/lib_gg_orgchart です。古い情報をここに掲載します：シンプルでオープンソースのJavascript組織図ライブラリを探している人のために：lib_gg_orgchartを公開しました。 JSON入力を使用し、Raphaelを使用してチャートを描画します。いくつかの例についてはサイトを見て、ダウンロードしてください。便利だと思ったら教えてください。すぐに新しいバージョンがリリースされ、いくつかのバグが修正され、共同編集者の変更が統合されます。

4
Gorka Llona

商用のシナリオでは、 yFiles for HTML は必要な柔軟性を提供します：

単純な組織図 demo online があり、これをライブラリ（実際には汎用のグラフ描画ライブラリ）で実装する方法を示します。

Organization Chart Demo Screenshot

ライブラリの自動レイアウトアルゴリズムは、どちらも純粋に階層的なツリー構造を処理できますが、要素が複数の親を持つことができる「ニアツリー」構造も処理できます。管理チームまたは複数の親会社をモデル化します。

ライブラリには、任意の巡回複雑度を備えた一般的なグラフとエッジルーティングアルゴリズムを使用できる一般的なグラフを処理できるレイアウトアルゴリズムもあります。まれなエッジの場合でも、厳密な階層ツリー構造に属さないエッジをルーティングできるように視覚化できます。 （たとえば、関係の追加レイヤーを示すため）-これは、執筆時点では上記リンクのデモの一部ではありません。ただし、より一般的な layout demo は、いくつかのレイアウトアルゴリズムとそれらのオプションの多くを示しています。

免責事項：私はそのライブラリを作成する会社で働いていますが、SO私は雇用主を代表していません。コメント、考え、答えは私自身のものです。

2
Sebastian

Googleのようにserviceとして機能する代替手段を探している場合、私はあなたが持っているとは思わない。これらのチャートを作成できるライブラリ（js、php、flash）を探している場合（サーバーにライブラリをインストールし、チャートオブジェクトを作成するためのシンプルなインターフェイスを作成できます） SOでの古い投稿 または Googleでいくつかのブログ投稿を検索 。

組織図creatorにのみ興味がある場合は、作業を完了させるためだけに、何も勝ちません Creately's solutions 意見。ダイアグラムを1つだけ作成する必要があり、それを支払いたくない場合は、 Lovely Charts を使用できます。

1
GmonC

まあwww.orgchartasp.netもあなたがorgchartsを構築/表示するのに役立ちます

http://orgchartasp.net/Sample.aspx

http://orgchartasp.net/Sample1.aspx （上部に画像あり）

http://orgchartasp.net/Sample1.aspx （左側に画像あり）

これは、バックエンドで階層を構築し、クライアント側でjavascriptを構築するのに役立つ.netライブラリです。

1
Chandra Sekhar Walajapet

Graphviz とJavascriptを使用してソリューションを実装できます。 Graphvizは、3つの条件すべてを簡単に処理します。 graphvizでグラフを作成し、SVG形式で出力します。そこから、JavaScriptをスローします。たとえば、 シャルルマーニュの部分的な家系図 は、本質的に非常に複雑な組織図です。

1
Dan

トライを使用できます： https://github.com/mikedeboer/trie または https://github.com/odhyan/trie MootoolsにはMIF.Treeもあります： http://mootools.net/forge/p/mif_tree 、これはツリー構造を表示します

1
peterhil

G'Day ooo

これを短くします。ありません。とにかくJavascriptではありません。 http://www.cogmap.com/ がおもしろいかもしれませんが、自分のページのコントロールとして使用できるものではありません。

個人的には、SilverlightやFlashのようなリッチな埋め込みメディアのいくつかを見ています。それはあなたにとって選択肢ですか？

カム

0
Cam