ひよっこ。

I want to…

jQueryのグラフライブラリflotをちょっとだけチューニングする

Posted by hikaruworld : 2011 2月 15

jQueryのライブラリの一つでグラフ描画用のライブラリでflotというものがあります。
これを利用しようとして試していたログになります。
ちなみにjQueryのバージョンはGoogleCodeの最新のリビジョン293を利用しました。

とりあえず、1000*10本ほどデータをプロットしてみます。
さくさく動きます(Firefoxで)。データの初期化なども簡単です。
さくさく動きます(GoogleChromeで)。プラグインも導入できるみたいです。

IEはexcanvasが必要との事で、excanvasを読み込んで
IE8で確認してみました。

さくさく動きません(IE8で)…
とりあえず目算だと…

  • Firefox & Chrome -> 1秒未満
  • IE8 ————–> 10秒以上

TODO IE8でプロファイリングして、プロファイリング結果を書く。

直接的なボトルネックはexcanvasが原因のようです…

とりあえず、(出来る範囲で)flotの設定周りからいじっていきます。

その1 影を消す

flotのデフォルト設定ではplotされる線に影の設定がされているので、これを消します。

shadowSize : 0

TODO 時間の差分

その2 plotポイントを変更

flotのplot設定はデフォルトではarc(円)になっているのでこれを、fill(四角)に変更します。
symbolで任意のcallback関数を指定する事でplotされる点をカスタマイズできます。

var options = {
	lines: { show: true },
	points: { 
		show: true,
		symbol: function(ctx, x, y, radius, shadow) {
			ctx.fillRect(x, y, 1, 1);
			//ctx.lineTo(x, y); ラインという方法もあり?
		}
	}
},

その3 plotポイントを削除

長方形でも遅いので、pointsを消します

var options = {
	lines: { show: true },
	points: { 
		show: false,
	}
},

# これちょっと悲しすぎる気が…

これで大体1/2の早さになりましたが、まだまだです。

その4 lineを消す

var options = {
	lines: { show: false },
	points: { 
		show: false,
	}
},

意味なし。既にグラフではありません。

# え?、ChromeFrameを使えって?、FlashCanvasを使えって?
# それが出来るならFlexで書きますよ、はい。

TODO 差分ロードが出来ないか検証
TODO Flot及びexcanvasをチューニング出来ないか検討

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。