Ext.ux.Flot (jQuery を使用した ピュア javascript グラフ)

[kiyoto01]

2008年12月の第六回勉強会で発表させていただいた jQuery を使ったピュア Javascript のグラフ描画ライブラリ flot を Ext に取りこんだ Ext.ux.Flot ですが、その後数か月を経て、ようやくまともな感じになってきたので、投稿させていただきます。;)

* ダウンロードはこちらから http://code.google.com/p/extflot/
* デモページはこちら http://extflot.googlecode.com/svn/trunk/index.html
* 簡単なサンプルはこちら http://code.google.com/p/extflot/wiki/Tutorial
* API ドキュメントはこちら http://extflot.googlecode.com/svn/trunk/extflot-doc/index.html

グラフについては、Ext JS 3.0 で YUI の swf を使ったものが標準で入るようなので、すでに陳腐化しているかも、という話はあるのですが。。。:s

flot は flash を使った Ext 標準のグラフと比べて、以下のような特長があります。

* canvas を用いた ピュア javascript なので、flash をつかえない環境でも動作 (IE は excanvas.js を使用)
* ピュア javascript なので、再描画・操作時などに、いちいちサーバに問い合わせにいかない
* 対応しているのは、棒グラフ、折れ線グラフのみ (円グラフは未対応)
* ユーザのダイナミックな操作を重視 (点の動的な選択、ズームイン・ズームアウト、平行移動）

デフォルトで、コンテキストメニューや、ツールチップの表示、プロパティダイアログ等、しょうしょう無駄なくらい充実しておりますので、ぜひデモをお試しください。:D

[amanoman]

flashも良いけど、プラグインなしで、IE,FF等に利用できるところにこだわりがあってかっこいいですね。

Ext 2.2.1 +IE6の環境でdemoを見ていて、コンテキストメニューのアイコン配置が、右にずれてしまいます。
Ext 2.2.1のbugで、対応法が載っていましたので再掲載します。

extのcssをロード以降に以下のcssを追加する。


.ext-ie .x-menu-item-icon {left: -24px;}
.ext-strict .x-menu-item-icon {left: 3px;}
.ext-ie6 .x-menu-item-icon {left: -24px;}


参考スレッド
http://extjs.com/forum/showthread.php?t=59692

以上、参考までにでした。

[kiyoto01]

ありがとうございます。
IE6 は正直、あんまり動作確認をしていないので、情報助かります。
次のバージョンでとりこみたいと思います。

[kiyoto01]

ver 0.6 をリリースしました。

* resize イベントに対応 (onResize メソッドを追加)
* IE6 でコンテキストメニューのアイコンがずれるのを修正
* 円グラフ対応

http://code.google.com/p/extflot/

円グラフ対応はくせもので、まだ flot のほうが正式にサポートしていないため、バグバグでございます。
が、まあ、いちおうは出せるようです。
(副作用で、棒グラフのほうがいかれてしまいますが)

http://extflot.googlecode.com/svn/trunk/pie.html


おまけで、動的な更新のサンプルも入っています。
http://extflot.googlecode.com/svn/trunk/dynamic.html
2枚同時に起動すると半分の速度になったり、
他のタブの動きが重くなったりするのはご愛敬ですが、
それでも、サーバに問い合わせにゆくよりはましなのでしょう。。。

また、英語版のほうでも、投稿しているのですが、微妙に需要があるようです。
http://extjs.com/forum/showthread.php?t=63364

google の chart は重いとか、flash の chart は生理的に嫌いとか。。。