我有一个场景,我正在绘制一个堆积柱形图,目前卡在一个点上,我需要按特定顺序对系列进行排序,以防同一天有多个数据点。问题是,每天的系列顺序可能不同 - 我有下面的代码和示例 -
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。橙子和梨也是如此。
这能实现吗?如有任何帮助,我们将不胜感激。
最佳答案
可以使用这种方法来完成:
- 创建一个对列进行排序的函数:
- 循环点并按类别(苹果、橙子等)对它们进行分组
- 循环遍历每组点并按 y 值对组进行排序
- 循环遍历每个组中的点,并使用
SVGElement.attr
方法设置新计算的 y 位置(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引用:
关于javascript - Highcharts - 堆积柱 - 为每个类别动态排序系列索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54638256/