C3堆叠图表维护数据顺序 [英] C3 stacked chart maintain data order

问题描述

我按照参考文献和此答案的说明进行操作但是我没有成功。

I'm following the instructions from the reference and from this answer, but am having no success.

我有一个堆积条形图，我希望堆栈中的数据按照它在数据中的顺序显示，但它正在重新订购，我无法弄清楚如何防止它。

I've got a stacked bar chart, I want the data in the stack to appear in the order it is in in the data, but it's getting re-ordered and I can't figure out how to prevent it.

这是一个 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等等

I would like the series to be in the order 0-1, 2-3, 4-5, etc

推荐答案

原来这是已知问题。如果任何一个标头是一个整数（或一个整数的字符串），那么c3将对列进行排序。

Turns out this is a known issue. If any one of the headers is an integer (or a string that is an integer), then c3 will sort the columns.

要解决这个问题，我要附加一个空格到列名的末尾，所以c3将它们解释为字符串而不是数字。

To work around I'm appending a space to the end of the column names so c3 interprets them as a string and not a number.

例如

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 的解决方法。

I've updated the jsfiddle with the workaround.

这篇关于C3堆叠图表维护数据顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！