Wie man c3.js Balkendiagramm sortiert

Question

Ich freute mich darauf, die Balken im Balkendiagramm (nicht gestapelte Balken) mit c3.js zu sortieren. Konnte jedoch keinen geeigneten Weg finden, gibt es eine Option, die unten erwähnt wird, aber das ist nicht für das Balkendiagramm anwendbar.

data: { 
    order: 'asc' 
} 

In meinem Fall alle Daten kommen mit Ihrem jsfiddle dynamisch und Rendering durch c3.js zu Bar machen chart.I wurde wie https://bl.ocks.org/mbostock/raw/3885705/ für eine Art suchen

Answer 1

Sie auf dem richtigen Weg waren, aber Da die an c3.generate() übergebenen Daten ein Array von Datensätzen sind, können Sie data.sort() nicht einfach aufrufen.

EDIT

Für diesen speziellen Fall, in dem Sie Ihre Daten in der Form ist, dass Sie in Ihren Kommentaren beschrieben, wäre dies eine geeignete Methode sein.

Ich habe hauptsächlich Array-Funktionen wie Slice, Splice, Map und Sort verwendet. Dies sind wichtige Funktionen, mit denen Sie sich vertraut machen können, wenn Sie Daten manipulieren und grafisch darstellen. Die mozzila docs sind ein guter Anfangspunkt.

Sie sollten auch notieren, welche Funktionen das Array ändern, an dem sie aufgerufen werden und die ein neues Array zurückgeben; Mutieren Sie Ihre Daten, wenn Sie es nicht vorhaben, kann dies oft zu Fehlern führen.

var data = [ 
 
    ["a", "b", "c"], 
 
    ['data1', "30", " 200", " 100"] 
 
] 
 

 
// declare a function to control variable scope 
 
var sortData = function(unsortedData) { 
 

 
    // deep copy array to avoid modification of input array 
 
    var sorted = unsortedData.map(function(row) { 
 
    // use slice to copy this array 
 
    return row.slice() 
 
    }) 
 

 
    // remove the dataname 
 
    var name = sorted[1].splice(0, 1); 
 

 
    // produce an array of data points [[x1,y1],[x2,y2]...] 
 
    var datapoints = sorted[1].map(function(d, i) { 
 
    // use index in map function to pull out name 
 
    // return array for datapoint [x,y] 
 
    return [sorted[0][i], d]; 
 
    }); 
 

 
    //sort datapoints 
 
    var sortedData = datapoints.sort(function(a, b) { 
 
    return a[1] - b[1]; 
 
    }); 
 

 
    // map back into separate x and y data 
 
    sorted[1] = sortedData.map(function(point, i) { 
 
    // assign x value to data[0] element 
 
    sorted[0][i] = point[0]; 
 
    // return the y data point 
 
    return point[1]; 
 
    }); 
 

 
    // add the dataname back into the y data 
 
    sorted[1] = name.concat(sorted[1]); 
 

 
    // add the 'x' label name to x-values 
 
    sorted[0].splice(0, 0, 'x') 
 

 
    // return the sorted array 
 
    return sorted 
 
} 
 

 
var chart = c3.generate({ 
 
    data: { 
 
    x: 'x', 
 
    columns: sortData(data), 
 
    type: 'bar', 
 
    }, 
 
    axis: { 
 
    x: { 
 
     type: 'category' // this needed to load string x value 
 
    } 
 
    } 
 
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script> 
 

 
<div id="chart"></div>