Morris.js條形圖無法格式化x-labels

Question

我想在morris.js條形圖中格式化x-labels。

請參閱此代碼： 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條形圖的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>