web-dev-qa-db-ja.com

morris.jsチャートに月を正しく表示するにはどうすればよいですか？

Morris.jsチャートに月が正しく表示されるのに問題があります。

<script>

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Morris.Line({
  element: 'morris-line-chart',
  data: [
          { m: '01', a: 0, b: 270 },
          { m: '02', a: 54, b: 256 },
          { m: '03', a: 243, b: 334 },
          { m: '04', a: 206, b: 282 },
          { m: '05', a: 161, b: 58 },
          { m: '06', a: 187, b: 0 },
          { m: '07', a: 210, b: 0 },
          { m: '08', a: 204, b: 0 },
          { m: '09', a: 224, b: 0 },
          { m: '10', a: 301, b: 0 },
          { m: '11', a: 262, b: 0 },
          { m: '12', a: 199, b: 0 },
        ],
  xkey: 'm',
  ykeys: ['a', 'b'],
  labels: ['2014', '2015'],
  xLabelFormat: function (x) { return months[x.getMonth()]; }
});
</script>

しかし、チャートのすべての月は「1月」と表示されます...

javascriptjquerymorris.js
6
Jack

ドキュメントを参照 の場合、requiredxkeyオプションは次のように定義されます。

日付（X）値を含む属性の名前を含む文字列。タイムスタンプは、ミリ秒のタイムスタンプの形式（Date.getTime（）によって返されるもの）または次の形式の文字列として受け入れられます。

  • 2012年
  • 2012年第1四半期
  • 2012 W1
  • 2012-02
  • 2012-02-24
  • 2012-02-24 15:00
  • 2012-02-24 15:00:00
  • 2012-02-24 15：00：00.000

現在、データでは、月を表すint（01、02、03など）のみを指定しています。

したがって、ドキュメントによると、月のデータを有効なタイムスタンプ文字列に変更すると、返された「月」の値のインデックスをmonthsラベル配列にマッピングするための有効なメソッドが必要になります。

例：

_var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

Morris.Line({
  element: 'morris-line-chart',
  data: [{
    m: '2015-01', // <-- valid timestamp strings
    a: 0,
    b: 270
  }, {
    m: '2015-02',
    a: 54,
    b: 256
  }, {
    m: '2015-03',
    a: 243,
    b: 334
  }, {
    m: '2015-04',
    a: 206,
    b: 282
  }, {
    m: '2015-05',
    a: 161,
    b: 58
  }, {
    m: '2015-06',
    a: 187,
    b: 0
  }, {
    m: '2015-07',
    a: 210,
    b: 0
  }, {
    m: '2015-08',
    a: 204,
    b: 0
  }, {
    m: '2015-09',
    a: 224,
    b: 0
  }, {
    m: '2015-10',
    a: 301,
    b: 0
  }, {
    m: '2015-11',
    a: 262,
    b: 0
  }, {
    m: '2015-12',
    a: 199,
    b: 0
  }, ],
  xkey: 'm',
  ykeys: ['a', 'b'],
  labels: ['2014', '2015'],
  xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
    var month = months[x.getMonth()];
    return month;
  },
  dateFormat: function(x) {
    var month = months[new Date(x).getMonth()];
    return month;
  },
});_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet" />
<script src="http://cdn.oesmith.co.uk/morris-0.5.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<div id="morris-line-chart" style="height: 250px;"></div>_

編集

上記の例は、morrisバージョン0.5.1（0.5.0ではなく この問題に関するgithubページ -他のバージョンではテストしていません）を含めることで棒グラフ用に調整できますxLabelFormatオプションの変更（function(x){...}のxは、棒グラフと線の異なるオブジェクトであるようです）：

棒グラフの例：

_// months array and data are left the same
// only change is that the labelFormat option is removed
// and, x in xLabelFormat is a different object with Bar charts vs Line

// [inspect console to see the object]

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        m: '2015-01',
        a: 0,
        b: 270
    }, {
        m: '2015-02',
        a: 54,
        b: 256
    }, {
        m: '2015-03',
        a: 243,
        b: 334
    }, {
        m: '2015-04',
        a: 206,
        b: 282
    }, {
        m: '2015-05',
        a: 161,
        b: 58
    }, {
        m: '2015-06',
        a: 187,
        b: 0
    }, {
        m: '2015-07',
        a: 210,
        b: 0
    }, {
        m: '2015-08',
        a: 204,
        b: 0
    }, {
        m: '2015-09',
        a: 224,
        b: 0
    }, {
        m: '2015-10',
        a: 301,
        b: 0
    }, {
        m: '2015-11',
        a: 262,
        b: 0
    }, {
        m: '2015-12',
        a: 199,
        b: 0
    }, ],
    xkey: 'm',
    ykeys: ['a', 'b'],
    labels: ['2014', '2015'],
    xLabelFormat: function (x) { // <-- changed
        console.log("this is the new object:" + x);
        var month = months[x.x];
        return month;
    },
});_
_<link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>


<div id="morris-bar-chart" style="height: 250px;"></div>_
12
wahwahwah