Highcharts 在highchart的顶部和底部显示堆栈标签

Highcharts 在highchart的顶部和底部显示堆栈标签,highcharts,Highcharts,我使用的是堆叠和分组列,我需要在底部显示堆栈名称,在堆栈顶部显示堆栈总数 JSIDLE链接: 找到了另一种方法,但堆栈标签有问题 `https://jsfiddle.net/shak_imran/k58whtbx/5/` 您的尝试打破了stackLabel计算逻辑-实现这种类型的解决方案需要对核心代码进行一些更改 我认为更好的解决方案是在列下呈现这些标签。以下是如何实现这一目标的指南: 演示: 请随意测试和改进此代码。如果有什么不清楚的地方,就问吧 API: API: events: {

我使用的是堆叠和分组列,我需要在底部显示堆栈名称,在堆栈顶部显示堆栈总数

JSIDLE链接:

找到了另一种方法,但堆栈标签有问题

`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)
    }

  }
}