C3 堆叠图维护数据顺序

Question

我正在按照参考资料和 this answer 中的说明进行操作，但没有成功。

我有一个堆叠条形图，我希望堆叠中的数据按照它在数据中的顺序出现，但它正在重新排序，我不知道如何防止它.

这里是 jsfiddle。

这是代码

var chartOptions = {
  element: 'chart',
  data: {
    "rows":[["0-1","2-3","4-5","6","7"],[25,56,14,2,1],[6,66,27,0,0],[0,70,30,0,0],[27,54,14,5,0],[0,54,30,8,8],[29,64,7,0,0]],
    "type":"bar",
    "groups":[["0-1","2-3","4-5","6","7"]],
    "order":null
  },
  axis: {
    "x":{
      "type":"category",
      "categories":["Whole List","committed","community","congregation","core","crowd"]
    },
    "y":{
      "padding":{
        "top":0
      }
    }
  },
  stacked: true,
  size: {"height":300}
}

var chart = c3.generate(chartOptions);

我希望该系列的顺序为 0-1、2-3、4-5 等

Answer 1

原来这是一个known issue。如果 headers 中的任何一个是整数（或者是整数的字符串），则 c3 将对列进行排序。

为了解决这个问题，我在列名的末尾附加了一个 space，以便 c3 将它们解释为字符串而不是数字。

例如

chartOptions['data']['rows'][0] = ["0-1","2-3","4-5",
                                   "6 ", "7 "]; // Spaces appended to these
chartOptions['data']["groups"] = [["0-1","2-3","4-5","6 ", "7 "]];

我已经用解决方法更新了 jsfiddle。

C3 堆叠图维护数据顺序

C3 stacked chart maintain data order

javascript

c3.js