Highcharts - столбец с накоплением - индекс серии заказов динамически для каждой категории

Question

У меня есть сценарий, в котором я рисую столбчатую диаграмму с накоплением, в настоящее время застрявшую в точке, где мне нужно упорядочить ряды в определенном порядке в случае нескольких точек данных в один и тот же день.Проблема в том, что порядок серий может быть разным для каждого дня - у меня есть код и пример ниже -

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Stacked column chart'
},
xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
    min: 0,
    title: {
        text: 'Total fruit consumption'
    },
    stackLabels: {
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 
    'gray'
        }
    }
},
legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) 
      || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
 },
tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: 
                 {point.stackTotal}'
},
plotOptions: {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            color: (Highcharts.theme && 
                   Highcharts.theme.dataLabelsColor) || 'white'
        }
    }
},
series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Mary',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'Kevin',
    data: [3, 4, 4, 2, 5]
}]
});

JSFiddle: http://jsfiddle.net/arj_ary/4kz7rdpn/2/

Требование: в приведенном выше JSFiddle, дляВ каждой категории я хочу, чтобы самая низкая точка данных отображалась вверху.Так что для яблок я хочу, чтобы Мэри была наверху, поскольку она имеет значение 2. Аналогично для апельсинов и груш.

Можно ли это сделать?Любая помощь приветствуется.

Answer 1

Это можно сделать с помощью этого подхода:

1) создать функцию, которая сортирует столбцы:

• перебирает точки и группирует их по категориям (яблоки, апельсины и т. Д.)
• цикл по каждой группе точек и сортировка группы по значению y
• цикл по точкам в каждой группе и установка заново вычисленной позиции y с использованием метода SVGElement.attr (point.graphic является экземпляром SVGElement).Сделайте то же самое для point.dataLabel и установите новую позицию в массив point.tooltipPos (в противном случае подсказка будет размещена неправильно).

---

function sortColumns() {
  var chart = this,
    pointsByCat = {},
    bottomY,
    shapeArgs;

  chart.series.forEach(function(serie) {
    serie.points.forEach(function(point, index) {

      if (pointsByCat[point.category] === undefined) {
        pointsByCat[point.category] = [];
      }

      pointsByCat[point.category].push(point);
    });
  });

  Highcharts.objectEach(pointsByCat, function(points, key) {
    shapeArgs = points[points.length - 1].shapeArgs;
    bottomY = shapeArgs.y + shapeArgs.height;
    points.sort(function(a, b) {
      return b.y - a.y;
    });

    points.forEach(function(point) {
      if (point.series.visible) {
        point.graphic.attr({
          y: bottomY - point.shapeArgs.height
        });

        point.dataLabel.attr({
          y: bottomY - point.shapeArgs.height / 2 - point.dataLabel.height / 2
        });

        point.tooltipPos[1] = bottomY - point.shapeArgs.height;

        bottomY = bottomY - point.shapeArgs.height;
      }
    });
  });
}

2) setвышеупомянутая функция в качестве обратного вызова для событий chart.events.load и chart.events.redraw:

  chart: {
    type: 'column',
    events: {
      load: sortColumns,
      redraw: sortColumns
    }
  }

Демо:

• https://jsfiddle.net/BlackLabel/5tzmod8w/

Ссылка API:

• https://api.highcharts.com/highcharts/chart.events.load

• https://api.highcharts.com/highcharts/chart.events.redraw

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr