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

好吧，它没有在文档中指定，但您也可以使用 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>

Morris.js 条形图无法格式化 x 标签

Morris.js Bar Charts unable to format x-labels

javascript

morris.js