C3堆积图维护数据顺序答案

【问题标题】：C3 stacked chart maintain data orderC3堆积图维护数据顺序
【发布时间】：2017-04-16 02:49:52
【问题描述】：

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

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

这是代码

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 等

【问题讨论】：

标签： javascript c3.js

【解决方案1】：

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

为了解决这个问题，我在列名的末尾附加了一个空格，以便 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。

【讨论】：