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

Вы можете использовать функцию 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]]
  }]

API: https://api.highcharts.com/highcharts/series.line.index

Answer 2

Вам следует изменить порядок объектов вашей серии. Согласно это , highchart не имеет свойства для автоматической сортировки. Вы должны сначала вставить свою серию Low, затем Medium Low et c. То, что вы хотите сделать последним, вы должны поместить его первым в 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,
  }]
});

Я получил такой результат: