読者です 読者をやめる 読者になる 読者になる

唯物是真 @Scaled_Wurm

プログラミング(主にPython2.7)とか機械学習とか

dygraphs の日付がわかりづらい

dygraphsというJavaScriptのグラフを描画するライブラリがあります
私はHRForecastなどに使われていることで存在を知りました

以下のような感じで使えるライブラリです
第2引数にはCSVの文字列やCSVへのパスを与えます

<div id="graph1"></div>
<script type="text/javascript">
  g = new Dygraph(
    document.getElementById("graph1"),
    "Date,Temperature\n" +
    "2014-03-01,75\n" +
    "2014-04-01,70\n" +
    "2014-05-01,80\n"
  );
</script>

上のグラフを見ると下側に書いてあるラベルが"Apr 14"などとなっていて4月14日と間違えそうになります(自分は間違えました)
実は、2014年の4月を表しています
4月14日は下のグラフのように"14Apr"と表示されます

このx軸の日付の表示の仕方は個人的にはわかりづらいと思います
一応ちゃんとオプションで変更できるようにはなっていますが……

デフォルトの動作は以下のコードあたりで指定されてるみたいです
date.getTime() + 3600*1000とかやっているので時差もここで処理している(?)

試しに以下のように表示の仕方を指定してみます
以下のaxisLabelFormatterに与えている関数が表示の仕方を決めていて、granという引数は表示の粒度(日とか月とか年とか)を表しています

<div id="graph1"></div>
<script type="text/javascript">
  g = new Dygraph(
    document.getElementById("graph3"),
    "Date,Temperature\n" +
    "2014-03-01,75\n" +
    "2014-04-01,70\n" +
    "2014-05-01,80\n",
    {
      axes: {
        x: {
          axisLabelFormatter: function(d, gran) {
              var d = new Date(d.getTime());
              if(gran >= Dygraph.MONTHLY) {
                  return d.strftime("%Y %b");
              } else if(gran >= Dygraph.DAILY) {
                  return d.strftime("%b %d");
              } else {
                  return d.strftime("%H:00");
              }
          }
        }
      }
    }
  );
</script>

すると先ほどのグラフはこのように年の部分が4桁に変化します

-->