高位图表:按升序排列列堆栈



当前,列堆栈的顺序是随机的。我想要实现的是对底部值最大、顶部值最低的堆栈进行排序。

我尝试了series.dataSorting,但没有成功。

以下是我迄今为止所做的尝试:https://jsfiddle.net/karmablackshaw/5waou19L/6/

堆栈中列的顺序不是随机的,它取决于序列顺序。无法通过API实现这样的排序,但您可以在创建图表后修改列的位置。例如:

chart: {
...,
events: {
render: function() {
const series = this.series;
const plotBottom = this.plotTop + this.plotHeight;
series.forEach(s => {
s.points.forEach(point => {
let cumulativeY = 0;
const stackedPoints = series.map(serie => serie.points[point.index]);
stackedPoints.sort((p1, p2) => p2.y - p1.y);
stackedPoints.forEach(stackedPoint => {
cumulativeY += stackedPoint.shapeArgs.height;
const plotY = plotBottom - cumulativeY;
stackedPoint.tooltipPos[1] = plotY;
stackedPoint.graphic.attr({
y: plotY
});
});
});
});
}
}
}

现场演示:https://jsfiddle.net/BlackLabel/br97gz54/

API参考:

https://api.highcharts.com/highcharts/xAxis.reversedStacks

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

最新更新