Morris.js棒グラフでx-ラベルをフォーマットできない

Question

morris.jsでx-ラベルの書式を設定したい棒グラフ。

このコードを参照してください。 http://jsbin.com/uzosiq/258/embed?js,output

xLabelFormatオプションはhttps://morrisjs.github.io/morris.js/lines.html のようにチャートの他のすべてのタイプで使用可能ですが、https://morrisjs.github.io/morris.js/bars.html

Answer 1

でまあ、それが指定されていないいないバーチャートの例では使用できません。ただし、Morris BarチャートにはxLabelFormatを使用することもできます。

作業例を表示するには、このスニペットを実行してください：

var data = [ 
 
    { year: '2014', in: 10, out: 44, inOut: 54 }, 
 
    { year: '2015', in: 20, out: 55, inOut: 75 }, 
 
    { year: '2016', in: 50, out: 51, inOut: 101 } 
 
], 
 
config = { 
 
    data: data, 
 
    xkey: 'year', 
 
    ykeys: ['in', 'out', 'inOut'], 
 
    labels: ['Total Income', 'Total Outcome', 'Total In/Out'], 
 
    resize: true, 
 
    xLabelFormat: function (x) { 
 
     return "Year [" + x.src.year + "]"; 
 
    }, 
 
    parseTime: false 
 
}; 
 

 
config.element = 'bar-chart'; 
 
Morris.Bar(config);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> 
 

 
<div id="bar-chart"></div>