javascript - examples - librería de visualización d3 js

Gráfico de barras C3JS con orden específico

Question

Si tengo un gráfico de barras agrupado C3JS definido como el siguiente, ¿cómo puedo hacer que los segmentos permanezcan en el orden que los he definido en lugar de hacerlo en orden ascendente por valor? Por defecto C3 los ordenará como 5, 10, 40, pero quiero que permanezcan como 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
    }
  }
});

EDITAR

Resulta que es tan fácil como especificar el order: null en la propiedad de data .

Answer 1

La documentación de C3js tiene página para esto: http://c3js.org/samples/data_order.html

Puede ordenar sus datos de la siguiente manera:

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}]
        }
    }
});

También una explicación detallada aquí: http://c3js.org/reference.html#data-order

Puedes especificar tu función también :)