如何排序c3.js条形图

Question

我期待使用c3.js对条形图中的条形图（不是堆积条形图）进行排序。但找不到任何合适的方式，下面提到了一个选项，但这不适用于条形图。

data: {
    order: 'asc'
}

就我而言，所有数据都是动态传递的，并通过c3.js渲染制作条形图。我正在寻找类似https://bl.ocks.org/mbostock/raw/3885705/

的排序

Answer 1

您使用jsfiddle走在正确的轨道上，但由于传递给c3.generate()的数据是一组数据集，因此您不能只调用data.sort（）。

修改

对于这种特殊情况，您的数据采用您在评论中描述的形式，这将是一种合适的方法。

我主要使用像slice，splice，map和sort这样的数组函数。如果您正在操作和绘制数据，这些是熟悉的关键功能。 mozzila docs是一个很好的起点。

您还应该注意哪些函数修改了它们被调用的数组以及哪些函数返回了一个新数组;当您不打算进行数据变更时，通常会导致难以发现的错误。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;