如何在highcharts中为每个系列堆叠的水平条添加页脚? [英] How to add footer for each series stacked horizontal bars in highcharts?

问题描述

我产生了类似的东西.

具有用于highchart选项的以下代码:

with this code for highchart option:

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

但是我想要类似下面的东西.根据上面的代码，我怎么能生成下面的图像? 我要在每个图表的前面都添加页脚和标题.

but i want something like below. according to above code, how can i generate below image? i want the footer and also the title in front of every chart.

推荐答案

您应该可以使用 stackLabels 和 dataLabels 功能及其格式化程序回调函数来实现此目标自定义它们.

You should be able to achieve it by using the stackLabels and dataLabels feature and their formatter callback function to customize them.

演示: https://jsfiddle.net/BlackLabel/m1skyt9g/

用于显示百分比值的代码(我不确定这是否是正确显示的值，但是您应该能够轻松地将其更改为您的要求)，位于栏旁边:

Code to show the percent value (I'm not sure if this is the correct value to show, but you should be able to easily change it to your requirments) next to the bar:

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

要将页脚"显示为数据标签:

To show the 'footer' as a dataLabel:

  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

让我知道这是否是您的初衷.

Let me know if it is what you had in mind.

这篇关于如何在highcharts中为每个系列堆叠的水平条添加页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！