Question

我正在尝试在x线上打印所有月份以进行比较。但这只是打印一月...

我使用Morris.js图形插件。

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

  Morris.Line({ element: 'morris-line-chart', 
    data: 
      [ { month: '00', a: 100, b: 90},
        { month: '01', a: 100, b: 90 }, 
        { month: '02', a: 100, b: 90},
        { month: '03', a: 100, b: 90}, 
        { month: '04', a: 100, b: 90 },
        { month: '05', a: 100, b: 90 } ],

    xkey: 'month',
    ykeys: ['a', 'b'], 
    labels: ['2015', '2014'], 
    hideHover: 'auto', 
    resize: true, 
    xLabelFormat : function (x) { return months[x.getMonth()]; }
  });
});

Answer 1

如下更新您的xLabelFormat，它将按预期运行。

xLabelFormat : function (x) { return months[+x.src.month] }

您的月份数组也不再具有fifth的值Mar。更新后的数组如下。

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

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

Morris.Bar({
  element: 'bar-example',
  data: [{
      month: '00',
      a: 100,
      b: 90
    },
    {
      month: '01',
      a: 100,
      b: 90
    },
    {
      month: '02',
      a: 100,
      b: 90
    },
    {
      month: '03',
      a: 100,
      b: 90
    },
    {
      month: '04',
      a: 100,
      b: 90
    },
    {
      month: '05',
      a: 100,
      b: 90
    }
  ],
  xkey: 'month',
  ykeys: ['a', 'b'],
  labels: ['2015', '2014'],
  hideHover: 'auto',
  resize: true,
  xLabelFormat: function(x) {
    return months[+x.src.month]
  }
});

<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<div id="bar-example"></div>

尝试在x行上打印所有月份

1 个答案: