Как добавить нижний колонтитул для каждой серии горизонтальных полос в верхних чартах?

Question

я сгенерировал что-то вроде.

с этим кодом для опции старшей диаграммы:

    Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    colors: [ '#ff058d', '#9696b2'],
    title: {
        text: null
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        labels: {
                align: 'left',
                x: 0,
                y: -20,
                fontsize: '1em',
                color: 'black'
              }
    },
    yAxis: {
            visible: false,
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        visible: false,
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Compliant',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Non-Compliant',
        data: [2, 2, 3, 2, 1]
    }]
});

но я хочу что-то как ниже. в соответствии с приведенным выше кодом, как я могу создать изображение ниже? Мне нужен нижний колонтитул, а также заголовок перед каждым графиком.

Answer 1

Этого можно добиться, используя функцию stackLabels и dataLabels и функцию обратного вызова их средства форматирования для их настройки.

Демонстрация: https://jsfiddle.net/BlackLabel/m1skyt9g/

Код для отображения значения в процентах (я не уверен, что это правильное значение, но вы должны иметь возможность легко измените его в соответствии с вашими требованиями) рядом с панелью:

stackLabels: {
  enabled: true,
  x: 6,
  formatter() {
    let output = Math.round(this.total / this.points[0][0] * 100) / 100;
    return output + '%'
  }
}

Чтобы отобразить нижний колонтитул как метку данных:

  dataLabels: {
    enabled: true,
    align: 'left',
    allowOverlap: true,
    y: 23,
    formatter() {
        let output = Math.round(this.total / this.y * 100) / 100
      if (!this.colorIndex) {
        return '';
      } else {
        return 'Previous Non-Compliance of ' + output + '%'
      }
    }
  }

API: https://api.highcharts.com/highcharts/yAxis.stackLabels.format

API: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels

Дайте мне знать, если это то, что вы имели в виду.