ひよっこ。

I want to…

    広告
  • つぶやき。。。

    • 間違って違うワークスペースでヘルプを出してしまった。怖... 19 hours ago
    • うーん、notificationなどで利用するComponent内で限定した(Reactで言う)stateを持ちたいんだけど...。素直にhyperappのstateで保持するか。 1 day ago
    • ふと気になって調べてみたら、ESNextの OptionalChainingはstage1にはいるのか。 github.com/tc39/proposal-… 2 days ago
    • @JorgeBucaran ありがとうございます。ちょっと試してみます。ondestroyのログは取れてたので、 > This event is not called in its child elements. が原因かなと思ってました。 2 days ago
    • SlackってNGOや教育割り引きあったのか。おおよそ85%オフとのこと get.slack.help/hc/ja/articles… 2 days ago
  • archive

  • ジャンル

  • tag

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人のブロガーが「いいね」をつけました。