Highcharts - столбец с накоплением - динамический индекс серии заказов для каждой категории
У меня есть сценарий, в котором я рисую столбчатую диаграмму с накоплением, в настоящее время застрявшую в точке, где мне нужно упорядочить ряды в определенном порядке в случае нескольких точек данных в один и тот же день. Проблема в том, что порядок серий может быть разным для каждого дня - у меня есть код и пример ниже -
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. Аналогично для апельсинов и груш.
Можно ли это осуществить? Любая помощь приветствуется.
пример JSFiddle: jsfiddle.net/jeffld/kseqow0m/3
@jeffld хорошая попытка, но да, у меня не работает. Мне нужно, чтобы сама серия упорядочивалась так, чтобы наименьшее количество данных для этой категории всегда было сверху. :-)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это можно сделать с помощью такого подхода:
- создайте функцию, которая сортирует столбцы:
- перебрать точки и сгруппировать их по категориям (яблоки, апельсины и т. д.)
- перебрать каждую группу точек и отсортировать группу по значению y
- перебрать точки в каждой группе и установить вновь вычисленное положение y с помощью метода
SVGElement.attr(point.graphic является экземпляром SVGElement). Сделайте то же самое дляpoint.dataLabelи установите новую позицию в массивpoint.tooltipPos(иначе всплывающая подсказка будет размещена неправильно).
function sortColumns() {
var chart = this,
pointsByCat = {},
zeroPixels,
bottomYPositive,
bottomYNegative,
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) {
zeroPixels = chart.yAxis[0].toPixels(0) - chart.plotTop;
bottomYPositive = bottomYNegative = zeroPixels;
points.sort(function(a, b) {
return b.y - a.y;
});
points.forEach(function(point) {
if (point.series.visible) {
if (point.shapeArgs.y < zeroPixels) {
// Positive values
point.graphic.attr({
y: bottomYPositive - point.shapeArgs.height
});
point.dataLabel.attr({
y: bottomYPositive - point.shapeArgs.height / 2 - point.dataLabel.height / 2
});
point.tooltipPos[1] = bottomYPositive - point.shapeArgs.height;
bottomYPositive = bottomYPositive - point.shapeArgs.height;
} else {
// Negative values
point.graphic.attr({
y: bottomYNegative
});
point.dataLabel.attr({
y: bottomYNegative + point.shapeArgs.height / 2 - point.dataLabel.height / 2
});
point.tooltipPos[1] = bottomYNegative;
bottomYNegative = bottomYNegative + point.shapeArgs.height;
}
}
});
});
}
2) установить вышеуказанную функцию в качестве обратного вызова для событий chart.events.load и chart.events.redraw:
chart: {
type: 'column',
events: {
load: sortColumns,
redraw: sortColumns
}
}
Демо:
Ссылка на API:
Какова логика выбора shapeArgs последней точки в pointByCat выше? Эта строка: - shapeArgs = points[points.length - 1].shapeArgs; В приведенной выше логике есть недостаток, столбцы начинают плавать, потому что логика установки новых «y» и «bottomY» не ясна.
Выбирается последняя точка, потому что точки сортируются и отображаются в новых позициях, начиная с последней, которая находится на вершине стека. Не могли бы вы воспроизвести эту проблему?
Итак, что я должен изменить в приведенной выше логике, если столбцы должны быть отсортированы по другому свойству, а не по значению «y»? Например, им нужно сортировать по calendarDate? В этом случае я могу изменить функцию сортировки на сортировку по calendarDate, но shapeArgs извлекается из последнего элемента в массиве?
Да, он извлекается из последнего элемента, потому что точки отображаются из последней точки. Весь стек точек имеет одинаковую высоту, только порядок меняется независимо от того, как отсортированы столбцы.
Лучшее, что я мог сделать, это получить общее количество для каждого человека, а затем отсортировать данные, но я не думаю, что это то, о чем вы просите. Я думаю, вы хотите, чтобы каждый столбец был большим и самым маленьким, а самый большой внизу.