Highcharts 在highchart的顶部和底部显示堆栈标签
我使用的是堆叠和分组列,我需要在底部显示堆栈名称,在堆栈顶部显示堆栈总数 JSIDLE链接: 找到了另一种方法,但堆栈标签有问题Highcharts 在highchart的顶部和底部显示堆栈标签,highcharts,Highcharts,我使用的是堆叠和分组列,我需要在底部显示堆栈名称,在堆栈顶部显示堆栈总数 JSIDLE链接: 找到了另一种方法,但堆栈标签有问题 `https://jsfiddle.net/shak_imran/k58whtbx/5/` 您的尝试打破了stackLabel计算逻辑-实现这种类型的解决方案需要对核心代码进行一些更改 我认为更好的解决方案是在列下呈现这些标签。以下是如何实现这一目标的指南: 演示: 请随意测试和改进此代码。如果有什么不清楚的地方,就问吧 API: API: events: {
`https://jsfiddle.net/shak_imran/k58whtbx/5/`
您的尝试打破了stackLabel计算逻辑-实现这种类型的解决方案需要对核心代码进行一些更改 我认为更好的解决方案是在列下呈现这些标签。以下是如何实现这一目标的指南: 演示: 请随意测试和改进此代码。如果有什么不清楚的地方,就问吧 API: API:
events: {
render() {
let chart = this,
stackMale = chart.yAxis[0].stacks['column,male,,'],
stackFemale = chart.yAxis[0].stacks['column,female,,'];
// Male label
for (let i in stackMale) {
let x = stackMale[i].label.x + chart.plotLeft,
y = chart.plotHeight + chart.plotTop,
labelBBox;
if (stackMale[i].customLabel) {
stackMale[i].customLabel.destroy();
}
stackMale[i].customLabel = chart.renderer.text('Male', x, y)
.add();
labelBBox = stackMale[i].customLabel.getBBox();
stackMale[i].customLabel.translate(-labelBBox.width / 2, labelBBox.height)
}
// Female label
for (let i in stackFemale) {
let x = stackFemale[i].label.x + chart.plotLeft,
y = chart.plotHeight + chart.plotTop,
labelBBox;
if (stackFemale[i].customLabel) {
stackFemale[i].customLabel.destroy();
}
stackFemale[i].customLabel = chart.renderer.text('Female', x, y)
.add();
labelBBox = stackFemale[i].customLabel.getBBox();
stackFemale[i].customLabel.translate(-labelBBox.width / 2, labelBBox.height)
}
}
}