具有特定顺序的 C3JS 条形图答案

【问题标题】：C3JS bar chart with specific order具有特定顺序的 C3JS 条形图
【发布时间】：2015-01-05 21:44:26
【问题描述】：

如果我有一个如下定义的 C3JS 分组条形图，我怎样才能让这些段保持我定义的顺序而不是按值升序排列？默认情况下，C3 会将它们排序为 5、10、40，但我希望它保持为 10、40、5。

c3.generate({
  bindto: '.active-loads',
  data: {
    columns: [
      ['Picking up future', 10],
      ['Enroute', 40],
      ['Delivered', 5]
    ],
    type: 'bar',
    groups: [
      ['Picking up future', 'Enroute', 'Delivered']
    ],
    onclick: function(d) {
      console.debug(d);
    }
  },
  axis: {
    rotated: true,
    x: {
      show: false
    }
  }
});

编辑

事实证明，这就像在 data 属性中指定 order: null 一样简单。

【问题讨论】：

这确实有效。我几乎开始写一个疯狂的自定义功能来订购 -.-
我也快疯了；）
我期待对简单条形图上的条形进行排序，如果可能的话，我提到了下面的内容（没有任何组）： var chart = c3.generate({ data: { columns: [['data1', 30, 200, 100, 400, 150, 250],], type: 'bar', order: 'desc' }, });

标签： javascript charts c3.js

【解决方案1】：

C3js 文档对此有页面：http://c3js.org/samples/data_order.html

您可以通过以下方式订购您的数据：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 130, 200, 320, 400, 530, 750],
            ['data2', -130, 10, 130, 200, 150, 250],
            ['data3', -130, -50, -10, -200, -250, -150]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2', 'data3']
        ],
        order: 'desc' // stack order by sum of values descendantly.
//      order: 'asc'  // stack order by sum of values ascendantly.
//      order: null   // stack order by data definition.
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

这里也有详细解释：http://c3js.org/reference.html#data-order

你也可以指定你的功能:)

【讨论】：

我确实看到了，但它也说order: null 是默认值，但如果你省略它，它实际上并没有默认应用它。您必须自己明确指定。
@PatrickGrimard 不，它说 desc 是默认检查我在上面给出的参考链接之一。我认为它在文档页面上的拼写错误，因为我检查了源和 desc 也是那里的默认选项。我必须在那里打开问题。
@Abhishek 我期待着对简单条形图上的条形进行排序，如果可能的话，我提到了下面的内容。 var chart = c3.generate({ data: { columns: [['data1', 30, 200, 100, 400, 150, 250],], type: 'bar', order: 'desc' }, });