質問
Webアプリケーション用の散布図3Dコンポーネントを探しています。現在、 JMathPlot (Javaアプレット内)を使用して、次のようなものを作成しています。
代替テキストhttp://jmathtools.berlios.de /lib/exe/fetch.php?media=scatterplot3d.png
JMathPlotは問題ありませんが、いくつかの必要な機能がありません(特に、プロットポイントのツールチップがあることに興味があります)。
代替手段はありますか?インタラクティブなWebテクノロジー(javascript、javaアプレット、flash、silverlight)は問題ありません。ユーザーは、ポイントの上にマウスを移動すると、プロットを回転/ズームしてツールチップを表示できるはずです。
解決
両方のシルバーライト用のシンプルな3Dエンジンがいくつかあります(例: http://www.markdawson.org/ Kit3D / または http://www.codeplex.com/aXelerateSL3D )とフラッシュ( ここにリスト)ActionScript、VB.NET、またはC#のいずれかを知っている場合、そのようなチャートを自分で簡単に作成できるはずです。
フラッシュのバージョン10には、単純な" 3dエンジン"が組み込まれています。 :
Flash Player 10ではxyz変換が可能です 上の2Dサーフェスのxyz回転 x、y、およびz軸。 Flash Player 10も パースペクティブとカメラを表示します 3Dライクを作成するために設定した角度 効果。
これでおそらく自分で簡単に構築できます。
JMathPlotはオープンソースであるため、ニーズに合わせて採用することも別の選択肢です。
他のヒント
処理もご覧ください。既製のコンポーネントがない場合もありますが、Webには数千の優れたソースコードの例があります。
James Blackの提案でキャンバスタグを使用し、非常に良いものですが、IE以外の更新されたブラウザが必要です。それともそうですか? Googleのおかげで、 IE内でChromeレンダラーを使用できます。このようにして、動的グラフでHTML5対応ブラウザー(Gecko、Webkit、およびPresto)をターゲットにし、IEユーザーにGoogleのAdd onがインストールされたらインストールするように依頼します。 canvas
は、IE以外のすべてのネイティブサポートと、Googleの Canvasを探索 IE用プラグイン。 SVG
のサポートはクロスブラウザでも利用できますありがとう 一部のプラグイン IEの場合。 IE用のChrome Rendererが必要な場合、他に何も必要ないことに注意してください。
canvasを使用できます。
または svg
でグラフを作成します、および既にいくつかありますそうするためのライブラリ。どちらのテクノロジーも動的グラフを作成できますが、いくつかの異なるアプローチがあります。
SVG canvas ------------------------------------------------------------------------------- Has scene DOM (SVG DOM, though) Single HTML element, rendering script-driven Deals in shapes Deals in pixels Somewhat hard to mix with HTML (not XHTML) Behaves like an image in both Event handling easy Event handling hard
動的なラベルを追加するのは非常に簡単ですが、本当に柔軟なものを作成するのは難しいので、私はあなたが望むことをするために SVG
で行くと思います擬似3D散布図のAPI。
svg
の問題は、非常に柔軟な言語を作成しようとすると、非常に複雑な言語になることです。ここでは、同じことを行う両方のライブラリで記述されたコードを見ることができます。
SVG
var rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", "5");
rect.setAttribute("y", "5");
rect.setAttribute("width", "20");
rect.setAttribute("height", "20");
rect.setAttribute("fill", "red");
parent.appendChild(rect);
var poly = document.createElementNS(SVG_NS, "polygon");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "-40,40 0,-40, 40,40");
parent.appendChild(poly);
キャンバス
with (ctx) {
fillStyle = "red";
fillRect(5, 5, 20, 20);
}
with (ctx) {
fillStyle = "green";
beginPath();
moveTo(-40, 40);
moveTo(0, -40);
moveTo(40, 40);
closePath();
fill();
}
canvasタグでこれを行うだけで、IE以外の更新されたブラウザでは、他のhtmlタグと同様のイベントがあるため、ツールチップを取得できます。
excanvasを使用してIEのほとんどの機能を利用できます。テキストを描くことができませんでした。
これはライブラリではありませんが、javascriptを使用してhtmlで作業する機能を提供します。
canvasXpressの3D散布図は、JavaScriptとCanvasの代替手段を提供します。 http://canvasxpress.org/scatter3d.html