ひよっこ。

I want to…

flotで日付のaxis表示がずれて焦るなど

Posted by hikaruworld : 2011 2月 25

jQueryのプラグインflotは便利です。
IEでなければ…ですが。

flotにおいて横軸はoptions.xaxisで整形出来ますが、
これに日付を設定していた場合にちょっとはまったのでメモしておきます。

たとえば、こんな風にミリ秒を与えて、xaxisのmodeを利用して整形しようとします。

var ticksData: [1298300400000, 1298905200000 /*...以下省略 */]

xaxis: {
	mode: "time",
	timeformat: "%m/%d",
	ticks: ticksData,
}

期待する値はは2/22,3/1ですが、
出力される結果は2/21,2/28になってしまいます。

これは日付を整形するflotの実装関数$.plot.formatDateが

getUTCDate()

になっているためでした。

まぁ、ローカル時間で渡していて世界標準時間で取ったらずれたという、よくあるパターン…
というわけで、tickFormatterを自分で定義しておきました。

xaxis: {
	ticks: ticksData,
	// 変換ロジックを定義
	tickFormatter: function (v, axis) {
		var d = new Date(v);
		var r = [];
		r.push(d.getMonth() + 1);
		r.push("/");
		r.push(d.getDate());

		return r.join("");
	}
}	

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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