如何在morris.js圖表​​中正確顯示月份？

Question

我有一個問題需要幾個月才能在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>

但圖表上的所有月份顯示為'Jan'......

Answer 1

如果查看文檔 ，則所需的 xkey選項定義如下：

包含包含日期（X）值的屬性名稱的字符串。 時間戳以毫秒時間戳的形式接受（由Date.getTime（）返回或以下列格式的字符串接受：

• 2012
• 2012年第一季度
• 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選項（ x在function(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[xx]; 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>