javascript - 如何为 Highcharts 中每个系列堆叠的水平条添加页脚？

Question

我已经生成了类似的东西。

使用以下代码作为 highchart 选项:

    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

请告诉我这是否是您的想法。