如何對 c3.js 條形圖進行排序

Question

我期待使用 c3.js 對條形圖中的條形（不是堆疊條形）進行排序。 但是找不到任何合適的方法，下面提到了一個選項，但不適用於條形圖。

data: {
    order: 'asc'
}

就我而言，所有數據都是動態傳入並通過 c3.js 呈現以制作條形圖。我正在尋找類似https://bl.ocks.org/mbostock/raw/3885705/ 的類型

Answer 1

您使用jsfiddle 走在正確的軌道上，但是由於傳遞給c3.generate()的數據是一組數據集，因此您不能只調用 data.sort()。

編輯

對於這種特定情況，您的數據采用您在評論中描述的形式，這將是一種合適的方法。

我主要使用數組函數，如切片、拼接、映射和排序。 如果您正在操作和繪制數據，這些是需要熟悉的關鍵功能。 mozzila 文檔是一個很好的起點。

您還應該注意哪些函數修改了它們被調用的數組，哪些返回了一個新數組； 在您不打算更改數據時更改數據通常會導致難以發現的錯誤。

 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>