Google chartsでグラフを作成した時の日付表示について

お世話になります。

Google chartsを利用してhtmlにグラフを記入していますが、
日付の表示が思ったようにいきません



<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//折れ線
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(
                         function() {
                         
                         var dataore = new google.visualization.DataTable();
                         dataore.addColumn('date', '');
                         dataore.addColumn('number', '利用時間');
                         dataore.addRows([
                                      [new Date(2017,03,02), 125],
                                      [new Date(2017,03,03), 110],
                                      [new Date(2017,03,04), 70],
                                      [new Date(2017,03,05), 50],
                                      [new Date(2017,03,06), 0],
                                      [new Date(2017,03,07), 130],
                                         [new Date(2017,03,08), 150],
                                         [new Date(2017,03,09), 120],
                                         [new Date(2017,03,10), 135],
                                         [new Date(2017,03,11), 155],
                                         [new Date(2017,03,12), 160],
                                         [new Date(2017,03,13), 0],
                                         [new Date(2017,03,14), 145],
                                         [new Date(2017,03,15), 150],
                                         [new Date(2017,03,16), 170],
                                         [new Date(2017,03,17), 120],
                                         [new Date(2017,03,18), 135],
                                         [new Date(2017,03,19), 180]

                                      ]);
                         var optionsore = {
                         title: '利用時間(分)',
                         hAxis: {format: 'MM月dd日'}, // 表示フォーマットの指定
                         legend: 'none'
                         };
                         var chart = new google.visualization.AreaChart(document.getElementById('gct_ore_area'));
                         chart.draw(dataore, optionsore);
                         }
                         );

</script>


<body>

    日別学習時間
    <div id="gct_ore_area"></div>


</body>
</html>

上記のコードを使用した際、日付の部分は 2017.3.1 としていますが、webにて表示させると日付が４月１日と表示されてしまいます。

日付を記入する場合などは何かルールが必要なのでしょうか？
よろしくお願いします

行動規範の内容に同意します

回答1件

ベストアンサー

「2017.3.1」がコードに無いので予想ですが、new Date(2017,03,02) は 2017.3.2 のつもりで書かれていますか？

その場合誤りです。Date は0-11までの数値で指定します。
また、「08」などよりも「8」と指定したほうがよいと思います。

【JavaScript の Date は罠が多すぎる - Qiita】
http://qiita.com/labocho/items/5fbaa0491b67221419b4#月は-0-から始まる

【Date - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

投稿2017/03/23 02:55

kei344

総合スコア69400

satoshi501

2017/03/23 03:06

回答ありがとうございます最初は0を付けずにやっていたのですが、うまくいかなかったので0を付けてみました。ただご指摘のあと上記のコードから０をはずして　2017,3,1 としてみましたが変化はありませんでした。

kei344

2017/03/23 03:19

ざっと Google Charts について見てみましたが、Dateをわたすのではなく文字列を渡せばよいのでは？ // [new Date(2017,03,02), 125] // ↓ ["2017,03,02", 125]

satoshi501

2017/03/23 06:47

ありがとうございます dataore.addColumn('date', '');　を　dataore.addColumn('string', '');　に変更して["2017,03,02", 125]に設定することでできました。ただこの場合ですとx軸の日付の収束はしてくれないみたいですね。 ※dateで行うとグラフの幅に合わせて表示する日付を調整してくれています。申し訳ありませんがdateのままで行えないものでしょうか

kei344

2017/03/23 07:04

動くサンプル： https://jsfiddle.net/Lo252g9n/ 最初の回答で指摘した通りで出来ると思いますが、上記サンプルを確認してみてください。

satoshi501

2017/03/23 08:47

すいません自分の理解力が足りなかったようで、０−１１というのは０から１がスタートするということなんですね。ありがとうございました

行動規範の内容に同意します