Highcharts-如何按名称对数据进行排序？

Question

我目前正在使用Highcharts制作水平条形图。我有5个不同的类别Low, Medium Low, Medium, Medium High and High，我想按类别名称通过以Low为起点的降序对从图表返回的数据进行排序。例如，所有Low数据首先出现在图形中，所有Medium Low，所有Medium出现在下，依此类推。

我已经进行了一些研究，下面的代码似乎是我所需要的

              dataSorting: {
                enabled: true,
                matchByName: true
            },

但是将其应用于HighCharts时，它不会影响我的图表。这是HighCharts中提供的功能吗？这可能吗？

这里是jsfiddle

我的代码：

let data = [10, 31, 13, 19, 21, 50, 10]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: "Bar Graph"
  },
  xAxis: {

  },
  yAxis: {
    min: 0,
    formatter: function() {
      return this.value + "%";
    },
    title: {
      text: '% of Total'
    }
  },
  legend: {
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'Low',
    color: '#0D6302',
    data: [data[0]],
    showInLegend: true,
  }, {
    name: 'Medium-Low',
    color: '#0B7070',
    data: [data[2]]
  }, {
    name: 'Medium',
    color: '#DC9603',
    data: [data[3]]
  },{
    name: 'Low',
    color: '#0D6302',
    data: [data[1]],
    showInLegend: false
  }, 
  {
    name: 'Medium-High',
    color: '#DD5F0C',
    data: [data[4]]
  }, {
    name: 'High',
    color: '#C50710',
    data: [data[5]]
  }]
});

---

当前外观：

---

所需外观：

Answer 1

您应该重新排列系列的对象。根据this，highchart没有自动排序的属性。您应该先插入Low系列，然后插入Medium Low等。要成为最后一个的事物，应该将其放在series中。

关注此

    let data = [10, 31, 13, 19, 21, 50, 10]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: "Bar Graph"
  },
  xAxis: {

  },
  yAxis: {
    min: 0,
    formatter: function() {
      return this.value + "%";
    },
    title: {
      text: '% of Total'
    }
  },
  legend: {
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'sorted'
    }
  },
  series: [{
    name: 'High',
    color: '#C50710',
    data: [data[5]]

  }, {
    name: 'Medium-High',
    color: '#DD5F0C',
    data: [data[4]]

  }, {
    name: 'Medium',
    color: '#DC9603',
    data: [data[3]]
  },{
    name: 'Medium-Low',
    color: '#0B7070',
    data: [data[2]]

  }, 
  {
    name: 'Low',
    color: '#0D6302',
    data: [data[1]],
    showInLegend: false
  }, {
    name: 'Low',
    color: '#0D6302',
    data: [data[0]],
    showInLegend: true,
  }]
});

我得到了这个结果：