如何对 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>