时间戳

首页 > 解决方案 > 避免在 a 中的每个列系列上显示重复的堆栈标签。高图表

javascript - 避免在 a 中的每个列系列上显示重复的堆栈标签。高图表

问题描述

我正在使用高图表来呈现如下堆叠的分组高图表。 https://jsfiddle.net/4tojbfsq/1/

我能够在顶部获得所有数据标签的总数，并且我还想在 x 轴上呈现一个堆栈标签，就像上面的小提琴中所示的双 x 轴但是我的问题是我能够在 x 轴上显示堆栈标签，但是我也看到每个堆叠系列都重复了相同的堆栈标签。

在此处输入图像描述

有什么办法可以在所有系列的底部显示堆栈标签，而不是在堆叠系列中的任何地方重复。

代码：

 yAxis: {
          allowDecimals: false,
          //offset:10,
          title: {
            text: 'Number of fruits'
          },
          stackLabels: {
          enabled: true,
            verticalAlign: 'top',
            formatter: function() {
            return this.total;
            },
          }

        },

        plotOptions: {
          column: {
            stacking: 'normal'
          },
          series: {
           dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            
            overflow: 'none',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.stack;
            }
          }
          }
        },

        series: [{
          name: 'John',
          data: [53, 33, 43,63,7,83],
          stack: 'malssses'
        }, {
          name: 'Joe',
          data: [33, 43,43,63,73,8],
          stack: 'female'
        }, {
          name: 'Jane',
          data: [42, 54,43,62,74,84],
          stack: 'malssses',
        
        }, {
          name: 'Janet',
          data: [34, 40, 42,36,74,83],
          stack: 'female',
        }]

标签： javascripthighchartsreact-highcharts

解决方案

重复的标签不是 a stacklabels，而是dataLabels. 您可以仅显示特定系列的 dataLabels：

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

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

API：https ://api.highcharts.com/highcharts/series.line.dataLabels

推荐阅读