如何对 c3.js 条形图进行排序

Question

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

data: {
    order: 'asc'
}

在我的例子中，所有数据都是动态传入的，并通过 c3.js 呈现以制作一个条形图 chart.I 正在寻找类似 https://bl.ocks.org/mbostock/raw/3885705/

的类型

Answer 1

您的 jsfiddle 方向正确，但由于传递给 c3.generate() 的数据是一组数据集，因此您不能只调用 data.sort()。

编辑

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

我主要使用数组函数，如切片、拼接、映射和排序。如果您正在操作和绘制数据，这些是需要熟悉的关键函数。 mozzila docs 是一个很好的起点。

您还应该注意哪些函数修改了调用它们的数组，哪些 return 一个新数组；在您无意的情况下更改您的数据通常会导致难以发现的错误。

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>

如何对 c3.js 条形图进行排序

How to sort c3.js bar chart

javascript

d3.js

nvd3.js

c3.js