高图表 - 如何按名称对数据进行排序？

Question

我目前正在使用Highcharts处理水平条形图。我有5个不同的类别，我想按类别名称按降序对从图表返回的数据进行排序，并以此为起点。例如，所有数据首先显示在图形中，所有 、全部显示在接下来，依此类推。Low, Medium Low, Medium, Medium High and HighLowLowMedium LowMedium我做了一些研究，似乎下面的代码是我需要的              dataSorting: {                enabled: true,                matchByName: true            },但是当将其应用于HighCharts时，它不会影响我的图表。这是 HighCharts 中提供的功能吗？这是可以做到的吗？我的代码：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

您可以使用该功能来定义影响渲染的顺序。index

演示：https://jsfiddle.net/BlackLabel/9Lsvmpbh/

  series: [{

    name: 'Low',

    index: 4,

    color: '#0D6302',

    data: [data[0]],

    showInLegend: true,

  }, {

    name: 'Medium-Low',

    index: 3,

    color: '#0B7070',

    data: [data[2]]

  }, {

    name: 'Medium',

    index: 2,

    color: '#DC9603',

    data: [data[3]]

  },{

    name: 'Low',

    index: 5,

    color: '#0D6302',

    data: [data[1]],

    showInLegend: false

  }, 

  {

    name: 'Medium-High',

    index: 1,

    color: '#DD5F0C',

    data: [data[4]]

  }, {

    name: 'High',

    index: 0,

    color: '#C50710',

    data: [data[5]]

  }]

原料药：https://api.highcharts.com/highcharts/series.line.index

Answer 2

您应该对系列的对象重新排序。据此，highchart没有自动排序的属性。您应该首先插入您的系列，然后依此类推。你想成为最后一个的东西，你应该把它放在第一位。LowMedium Lowseries

在此之后

    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,

  }]

});

我得到了这个结果：