【jQuery】グラフライブラリflotの「mode:”time”」の時、timeformatの頭0を消す方法

標準

どーも(^-^)/~岡本です。

今回はプログラミングの話、かつ非常にニッチな話で、多くの人にはほぼ関係ないのですが
僕と同じように困っている人も居るかもしれないので、備忘録的に残しておきます。

僕は今、仕事で「flot」というjQueryのグラフ描画用のライブラリを使っています。

 

flotで「mode:”time”」とした時に、日時ラベルの書式は「timeformat」で以下の様に指定します。

%a: 曜日名 (カスタマイズ可能)
%b: 月名 (カスタマイズ可能)
%d: 日, 頭0埋め (01-31)
%e: 日, 頭スペース埋め ( 1-31)
%H: 時, 24時間表記, 頭0埋め (00-23)
%I: 時, 12時間表記, 頭0埋め (01-12)
%m: 月, 頭0埋め (01-12)
%M: 分, 頭0埋め (00-59)
%q: 四半期 (1-4)
%S: 秒, 頭0埋め (00-59)
%y: 年 (2桁)
%Y: 年 (4桁)
%p: am/pm
%P: AM/PM (uppercase version of %p)
%w: 曜日の番号 (0-6, 日曜日が0)

(引用元:https://github.com/flot/flot/blob/master/API.md#time-series-data)

 

timeformatはこの様に、基本2桁表示で、1桁の場合は頭に0が強制的に付きます。(例えば9時は「09時」になる)。

しかしクライアントの方から「頭の0を消して欲しい」という要望がありました。

すぐに解決策が思いつかず困りましたが、timeformatは使わずにtickFormatterで以下の方法で解決しました。

xaxis: {
    mode: “time”,
    timezone: “browser”,
    tickFormatter: function (val, axis) {
        return new Date(val).getHours() + ‘時’;
    },
},

赤い字のところの様に記載すれば、
頭に0なしの「9時」などの様な表示になります。

「3日」などの場合は以下の様にします。

xaxis: {
    mode: “time”,
    timezone: “browser”,
    tickFormatter: function (val, axis) {
        return new Date(val).getDate() + ‘日’;
    },
},

あまり使うことは無いでしょうが、とりあえず。

今回はこんな所です。では(^-^)/~

 

 

オカモトラボ
自称個人Maker & 底辺プログラマ & 時々Webライター。チョコで「パンのあれ」作りました。ヴィレヴァンとAmazonでオリジナル商品「鼻の穴皿」販売中。スマホアプリ&ウェブサービス公開中。たまに他のサイトへ寄稿もしています。 DPZ新人賞2014&2017佳作/日本おもしろ記事大賞佳作/ヤフー課題解決エンジン賞受賞/ものづくり文化展「面白いで賞」「KitMill賞」受賞ほか。(⇒もっと詳しく)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です