Показать стейл-лейблы сверху и снизу на старшей диаграмме

Question

Я использую Stacked и сгруппированный столбец, где мне нужно было показать имя стека внизу и общее количество стека вверху стека.

JSFiddle link: Stacked and grouped

Найден другой способ сделать это, но возникли проблемы с метками стека.

`https://jsfiddle.net/shak_imran/k58whtbx/5/`

Answer 1

Ваша попытка ломает stackLabel логики вычислений c - реализация этого типа решения потребует некоторых изменений в коде ядра.

Я думаю, что лучшим решением будет рендеринг этих меток под столбцами. Вот как это сделать:

Демо: https://jsfiddle.net/BlackLabel/akoeyq5m/

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

  }
}

Не стесняйтесь тестировать и улучшать этот код. Если что-то неясно - просто спросите.

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

API: https://api.highcharts.com/highcharts/chart.events.render