グラフ描画ライブラリFlotをComponent化する

前回のExt勉強会で紹介されていた外部ライブラリのComponent化方法ですが、勉強会資料がアップロードされていないようだったので自分で作ってみました。

今回はその時に利用されていたグラフ描画ライブラリのFlotをComponentとして利用できる形にし、オリジナルのサンプルと同様のグラフを出力するExtのサンプルを作成しました。Flot (ExtJS component version)

利用方法は簡単で、通常のPanel生成オプションにdata、optionsプロパティ(この辺はFlot本体のAPIを参照)を追加するだけでOKです。Flotから発火されるイベントはサンプルに出てきたものだけ実装していますが、単純なコードなので都度追加していけるかと思います。

var panel = new Ext.FlotPanel({
  title       : 'example',
  collapsible : true,
  width       : 650,
  height      : 250,
  data        : プロットデータ,
  options     : グラフ描画オプション
  renderTo    : Ext.getBody()
});

panel.on('plotclick', function(event, pos, item){
  //データクリックイベント
});

panel.on('plotselected', function(event, ranges){
  //グラフ範囲選択イベント
});

panel.on('plothover', function(event, pos, item){
  //データホバーイベント
});

Flotはかなり手軽にきれいなグラフを描画できるので、こうしてComponentにしておくと色々な場面で利用できそうです。