図作成のためのJavascriptライブラリ？

Question

コンピュータのネットワーク図や電気回路図を作成できるJavaScriptライブラリ（無料または商用）。また、ダイアグラムのさまざまな項目間のアニメーションもサポートしています。

ありがとうございました。

Answer 1

これら3つのライブラリをチェックアウトし、彼らはあなたを助けることができるかどうかを確認：

Raphael

Raphaëlは、 という小さなJavaScriptライブラリで、 ベクターグラフィックスを使用してウェブ上での作業を簡素化します。 または画像のクロップと回転ウィジェットを作成する場合は、 の例では、このライブラリで簡単に を達成できます。 Raphaël ['ræfeɪəl]は のグラフィックを作成するためにSVG W3C RecommendationとVMLをベースにしています。つまり、作成する のグラフィックオブジェクトもすべて DOMオブジェクトであるため、 JavaScriptイベントハンドラを添付するか、後で を変更することができます。 Raphaëlの目標は、 に 描画ベクトルアートを互換性のあるアダプタを提供することです クロスブラウザと簡単です。

Protovis

Protovisは、このようなバーや ドットのような単純なマークとデータ のカスタムビューを構成します。すばやく視覚化するため 面倒になる低レベルグラフィック ライブラリとは異なり、Protovisは 構成を簡素化するために、継承、 スケールおよびレイアウトを可能にする、その エンコードデータの動的プロパティを介して マークを定義します。 Protovisは無料で、 オープンソースで、BSD ライセンスの下で提供されています。 WebベースのビジュアライゼーションにはJavaScriptとSVG が使用されています。 プラグインは必要ありません（ 最新のウェブブラウザが必要です）！ プログラミングの経験が役に立ちますが、 Protovisは主に宣言的で、 は例で学習するように設計されています。

Processingjs

Processing.jsは ウェブ用に設計された人気の高い処理、視覚 プログラミング言語の姉妹プロジェクト です。処理。jは、 視覚化、デジタルアート、 対話型アニメーション、教育 グラフ、ビデオゲームなどを Web標準を使用し、 プラグインなしで使用できます。 処理言語を使用してコードを書き、 ウェブページに、Processing.jsには 残りのコードを含めます。それは魔法ではなく、ほとんどです。もともとベン・フライと ケイシー・リースによって開発された

は

、処理は、エレクトロニック・アーツ とビジュアルデザインコミュニティが ビジュアル・コンテキストでコンピュータプログラミングの 基礎を学ぶのを助けるためにJavaに をもと オープンソースのプログラミング言語としてスタートしました。 Processing.jsは を次のレベルに持ち込み、 対応のブラウザで、現在の バージョンのFirefox、Safari、Chrome、 Opera、およびInternet Explorerを含むHTML5 対応ブラウザで処理コードを実行できるようにします。 Processing.jsは、ウェブに ビジュアルプログラミングのベストをもたらします。加工の場合は 、ウェブデベロッパーの場合は です。

Answer 2

1. Googleのチャート： http://code.google.com/intl/uk/apis/chart/
2. 道場：http://dojotoolkit.org/grids-charts
3. のExtJS：http://www.sencha.com/products/extjs/examples/#sample-3

Answer 3

無料のオンラインアプリで図面を表示してみましょう（draw.io）。それは図面を描画するためにmxGraphライブラリを使用します。

免責事項：

私はJGraphはに関連するソフトウェアの開発者です。

Answer 4

答えはDraw2D最後のではなく、少なくとも....絶対にJointJS

Answer 5

です。

簡単な図作成のためのJSライブラリです。 APIはJava/C＃の構文によく似ています。有名なRaphael JSライブラリの上の抽象と管理レイヤー。

コード例：

 var canvas = new draw2d.Canvas("gfx_holder"); 

     // Create two standard nodes for "start" and "end" and link 
     // this figures with a standard Connector 
     // 
     var start = new draw2d.shape.node.Start(); 
     var end = new draw2d.shape.node.End(); 

     canvas.addFigure(start, 80,180); 
     canvas.addFigure(end, 450,250); 

     // Add a connection via API calls between Start and Stop 
     // 
     var connection = new draw2d.Connection(); 
     connection.setSource(start.getOutputPort(0)); 
     connection.setTarget(end.getInputPort(0)); 
     canvas.addFigure(connection);