如何显示分组 highcarts 的数据标签/堆栈标签- Highcharts

Question

我正在使用 React Js highcharts，我希望能够显示低于我的系列值的标签

类似于下面的内容，但没有堆叠。我希望它们像下面 fiddle 中所示的那样分组

我必须努力解决这个问题： 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],
       
          dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            overflow: 'none',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.stack;
            }
          }

        }, {
          name: 'active',
          data: [34, 40, 42, 36, 74, 83],
       
          dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            overflow: 'none',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.stack;
            }
          }
        }]
      });

有人知道吗？谢谢

Answer 1

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

在格式化程序回调中，您可以设置想要的格式以显示为数据标签。

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

此外，我复制了你之前问题的逻辑：

如何显示分组 highcarts 的数据标签/堆栈标签- Highcharts

how to display data labels / stacklabels for a grouped highhcarts- Highcharts

javascript

highcharts

react-highcharts