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

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

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

 

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

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

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

 

timeformatはこの様に、基本２桁表示で、１桁の場合は頭に０が強制的に付きます。（例えば９時は「09時」になる）。

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

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

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

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

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

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

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

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