js堆叠条形图顺序/反转由Y键

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

本文关键字:条形图 顺序 js      更新时间:2023-09-26

我有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、输出

我想要实现的是在顶部绘制第一个Y键,然后是下面的第二个,等等。在这个例子中,这是"a"键,它需要放在所有键的最上面。基本上是为了恢复它在条中绘制所有小条的方式

您是否尝试还原传递给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
});