Morris.js 堆叠条形图 order/revese 按 Y 键

Question

我有 Morris.js 个堆积条形图：

Morris.Bar({
  element: 'bar-example',
  data: [
    { y: '2006', a: 150, b: 60 },
    { y: '2007', a: 175,  b: 65 },
    { y: '2008', a: 150,  b: 40 },
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  stacked: true
});

http://jsbin.com/bazomocoba/edit?html,js,output

我想要实现的是在顶部绘制第一个 Y 键，然后在下方绘制第二个 Y 键，依此类推。在示例中，这是 'a' 键，需要在顶部所有的。基本上恢复它在一个条中绘制所有小条的方式。

Answer 1

您是否尝试还原传递给 Morris.Bar 的数据？

Morris.Bar({
  element: 'bar-example',
  data: [ // reverse b and a
    { y: '2006', b: 60, a: 150 },
    { y: '2007', b: 65, a: 175 },
    { y: '2008', b: 40, a: 150 },
  ],
  xkey: 'y',
  ykeys: ['b', 'a'], // reverse b and a
  labels: ['Series B', 'Series A'], // reverse labels
  stacked: true
});

Morris.js 堆叠条形图 order/revese 按 Y 键

Morris.js stacked bar chart order/revese by Y key

javascript

morris.js