在柱形图上显示数据标签（总计和数据标签名称）- ReactJs highcharts

Question

我正在使用按列高图分组。例如：https: //jsfiddle.net/2bvudw1m/有没有一种方法可以显示代表列的计数y（在列系列的顶部）和数据标签名称（在底部）的数据标签？例如：这是我的系列数据：series: [{      name: 'active',      data: [53, 33, 43, 63, 7, 83],       dataLabels: {        enabled: true,        verticalAlign: 'bottom',        overflow: 'none',        crop: false,        y: 20,        formatter() {          return this.series.userOptions.name;        }      }        }, {      name: 'new',      data: [33, 43, 43, 63, 73, 8],         }]我想展示两件事：计数代表每个系列该系列的 DataLabel到目前为止我有这个： $(function() {      $('#container').highcharts({        chart: {          type: 'column',        },        title: {          text: 'Total fruit consumtion, grouped by gender'        },        xAxis: {          categories: ['Apples', 'Oranges', 'Apples2', 'Oranges2','Apples3', 'Apple33'],          offset: 30        },        yAxis: {          allowDecimals: false,          //offset:10,          title: {            text: 'Number of fruits'          },          stackLabels: {            enabled: true,            verticalAlign: 'top',          }        },        plotOptions: {        series: {          dataLabels: {            enabled: true,            formatter: function() {                return this.y;            }           }         },          column: {            stacking: ''          },        },        series: [{          name: 'active',          data: [53, 33, 43, 63, 7, 83],           dataLabels: {            enabled: true,            verticalAlign: 'bottom',            overflow: 'none',            crop: false,            y: 20,            formatter() {              return this.series.userOptions.name;            }          }                }, {          name: 'new',          data: [33, 43, 43, 63, 73, 8],                 }        ]      });    });https://jsfiddle.net/nec89t56/2/但是，这不起作用，因为当我尝试添加两个值时，它会添加计数y或名称。有没有一种方法可以同时添加列grouped: true和stacking: ""注意：我不能像“正常”那样堆叠，因为它会堆叠而不是分组，这不是我想要的。有任何想法吗？

Answer 1

您可以dataLabels通过定义dataLabels为对象数组来添加多个，其中每个对象都是每个数据标签的单独配置。

演示： https: //jsfiddle.net/BlackLabel/op4ehx8m/

plotOptions: {

  series: {

    dataLabels: [{

      enabled: true,

      verticalAlign: 'bottom',

      overflow: 'none',

      crop: false,

      y: 20,

      formatter() {

        return this.series.userOptions.name;

      }

    }, {

      enabled: true

    }]

  },

  column: {

    stacking: ''

  },

},