如何以特定顺序保持堆叠条形图组答案

【问题标题】：How to keep group of stacked bar charts in a particular order如何以特定顺序保持堆叠条形图组
【发布时间】：2019-05-04 01:47:08
【问题描述】：

尝试创建应按特定顺序显示的堆叠条形图。

数据来自 JSON 格式的外部 API。

知道如何强制 c3 这样做。

仅提到与订单相关的事情是按价值排序。

我希望 3 个堆叠条按特定顺序排列，而与值无关。

期望：P1*、P2*、P3*

实际：P3*、P1*、P2*

              data: {
                  url: 'ES-URL',
                  mimeType: 'json',
                  x: 'x',
                  names: {
                      "P11": " P-11 header",
                      "P12": " P-12 header",
                      "P21": " P-21 header",
                      "P22": " P-22 header",
                      "P23": " P-23 header",
                      "P24": " P-24 header",
                      "P31": " P-31 header",
                      "P32": " P-32 header",
                      "P33": " P-33 header"
                  },
                  type: "bar",
                  order: false,
                  //order: null,
                  groups: [
                      [
                        "P11",
                        "P12"
                      ],
                      [
                        "P21",
                        "P22",
                        "P23",
                        "P24"
                      ],
                      [
                        "P31",
                        "P32",
                        "P33"
                      ]
                  ],

在附图中，蓝色堆叠列应位于红色列之后。

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

问题在于计算组 x-order 的顺序不是取自组声明的顺序，而是取自最初声明数据系列的顺序。

对于在列中声明数据的标准方式，您可以通过更改此顺序来解决此问题，尽管它现在是硬连线的，但我不知道您的数据源是否适用于您声明数据的方式（url / json )。

替代方法是重写 c3 api getShapeIndices 函数以处理组顺序而不是数据顺序。这样它也是动态的，但没有给出任何保证等

chart.internal.oldGetShapeIndices = chart.internal.getShapeIndices;
chart.internal.getShapeIndices = function (typeFilter) {
    var $$ = this, config = $$.config;
    var indices = this.oldGetShapeIndices (typeFilter);

    // collect x-indices of groups, these will currently be in data declaration order, i.e. data1 etc = 0, data5 etc = 2
    var groupXIndex = config.data_groups.map (function (group, i) {
        return indices[group[0]];
    }); // [2,0]
    // sort them
    groupXIndex.sort (function (a,b) { return a - b; });    // [0,2]

    // reassign these sorted indices to dataids by group order
    config.data_groups.forEach (function (group, i) {
        group.forEach (function (did) {
            if (indices[did] !== undefined) {
                indices[did] = groupXIndex[i];
            }
        });
    });
    // now data5 etc has index 0, and data1 etc has index 2

    return indices;
};
chart.flush();

https://jsfiddle.net/9p62zjtf/

【讨论】：