如何显示分组的highhcarts的数据标签/ stacklabels-Highcharts

问题描述

我正在使用React Js高图表，我希望能够在我的系列值以下显示标签

类似下面的内容，但没有堆积。我希望将它们像下面的小提琴一样进行分组

我必须努力做到这一点： https://jsfiddle.net/fp6ue5ox/

我要显示标签：

Active,confirmed,new

我尝试添加stackLabels，但它仍然显示

chart: {
          type: 'column',},title: {
          text: 'Total fruit consumtion,grouped by gender'
        },xAxis: {
          categories: ['Apples','Oranges'],offset: 30
        },yAxis: {
          allowDecimals: false,//offset:10,title: {
            text: 'Number of fruits'
          },stackLabels: {
            enabled: true,verticalAlign: 'top',}

        },plotOptions: {
          column: {
            stacking: ''
          },series: [ {
          name: 'new',data: [33,99,88,34,73,88],dataLabels: {
            enabled: true,verticalAlign: 'bottom',overflow: 'none',crop: false,y: 20,formatter() {
              return this.series.userOptions.stack;
            }
          }
        },{
          name: 'reopened',data: [42,54,43,62,74,84],formatter() {
              return this.series.userOptions.stack;
            }
          }

        },{
          name: 'active',data: [34,40,42,36,83],formatter() {
              return this.series.userOptions.stack;
            }
          }
        }]
      });

有人知道吗？ 谢谢

解决方法

请分析此演示：https://jsfiddle.net/BlackLabel/2ouLy1vj/

在格式化程序回调中，您可以设置所需的格式以显示为dataLabel。

  dataLabels: {
    enabled: true,verticalAlign: 'bottom',overflow: 'none',crop: false,//y: 20,formatter() {
      return this.series.name;
    }
  }

我也复制了您上一个问题的逻辑：how to determine the width of every column series present in the chart- highhcarts