如何在顶部显示所有条形值的总数-Highcharts列-反应highhcharts [英] how to display total count of all the bar values at the top- Highcharts colum- react highhcharts

问题描述

我想在堆叠的分组柱形图中的顶部显示总计数: http://jsfiddle.net/hgq495up/1/

I want to display total count at the top in a stacked grouped column chart: http://jsfiddle.net/hgq495up/1/

代码:

chart: {
          type: 'column'
        },

        title: {
          text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
          categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
          offset: 30
        },
        yAxis: {
          allowDecimals: false,
          //offset:10,
          title: {
            text: 'Number of fruits'
          },
          stackLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            //y:160,
            style: {
              fontWeight: 'bold',
              color: 'gray'
            },
            formatter: function() {
              return this.stack;
            },
          }
        },
        tooltip: {
          formatter: function() {
            return '<b>' + this.x + '</b><br/>' +
              this.series.name + ': ' + this.y + '<br/>' +
              'Stack: ' + this.series.options.stack;
          },
        },

        plotOptions: {
          column: {
            stacking: 'normal'
          }
        },

        series: [{
          name: 'John',
          data: [5, 3, 4, 7, 2],
          stack: 'male'
        }, {
          name: 'Joe',
          data: [3, 4, 4, 2, 5],
          stack: 'female'
        }, {
          name: 'Jane',
          data: [2, 5, 6, 2, 1],
          stack: 'male'
        }, {
          name: 'Janet',
          data: [3, 0, 4, 4, 3],
          stack: 'female'
        }]
      });

推荐答案

我看到您将stackLabels用于不同的目的-显示堆叠列的标签名称.因此，要替换stackLabels，我们可以使用以正确方式设置格式的dataLabels.

I see that you use the stackLabels in a different purpose - to show the label name for the stacked columns. So, to replace the stackLabels we can use the dataLabels formatted in the proper way.

演示: http://jsfiddle.net/BlackLabel/amjg7031/

  dataLabels: {
    enabled: true,
    verticalAlign: 'top',
    y: -20,
    overflow: "none",
    formatter: function() {
      let plotSize = this.series.chart.plotSizeY;

      if (this.point.yBottom !== plotSize) {
        return this.point.stackTotal;
      }
    }
  }

这篇关于如何在顶部显示所有条形值的总数-Highcharts列-反应highhcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！