2014-11-09 12 views
9

Jeśli mam zgrupowany wykres słupkowy C3JS zdefiniowany jak poniżej, w jaki sposób mogę uzyskać, aby segmenty pozostały w kolejności, w jakiej je zdefiniowałem, zamiast w porządku rosnącym według wartości? Domyślnie C3 będzie zamówić je za 5, 10, 40, ale chcę pozostać jako 10, 40, 5.Wykres słupkowy C3JS z określonym zamówieniem

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

EDIT

Okazuje się, że jest to tak proste, jak określenie order: null w Właściwość data.

+0

To zadziałało. Już prawie zacząłem pisać zwariowaną funkcję niestandardową do zamawiania -.- – cen

+0

Ja też doprowadzałem mnie do szału;) –

+0

Nie mogłem się doczekać sortowania taktów na prostym wykresie słupkowym, jeśli jest to możliwe, coś jak poniżej wspomniałem (bez żadnych group): var chart = c3.generate ({data: {kolumny: [['data1', 30, 200, 100, 400, 150, 250],], wpisz: 'bar', kolejność: 'desc'}, }); – user3172663

Odpowiedz

6

dokumentacja C3js ma stronę dla tego: http://c3js.org/samples/data_order.html

Można zamówić swoje dane w następujący sposób:

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

również szczegółowe wyjaśnienie tutaj zbyt: http://c3js.org/reference.html#data-order

Można określić swoją funkcję także:)

+0

Zauważyłem, że to jednak mówi również, że 'order: null' jest wartością domyślną, ale jeśli go pominiesz, to nie będzie ona domyślnie stosowana. Musisz to wyraźnie określić samodzielnie. –

+0

@PatrickGrimard Nie, Mówi, że domyślny jest desc, sprawdź link podany powyżej. Myślę, że jego literówka na stronie z dokumentacją, ponieważ sprawdziłem źródło i desc jest tam również domyślną opcją. Muszę tam otworzyć kwestię. – Abhishek

+0

@ Abhishek Nie mogłem się doczekać sortowania prętów na prostym wykresie słupkowym, jeśli jest to możliwe, coś jak poniżej wspomniałem. wykres var = c3.generate ({ data: { kolumny: [["data1", 30, 200, 100, 400, 150, 250],], typ: 'bar', kolejność: 'desc' }, }); – user3172663