Question

我正在使用 Stacked and grouped column 来显示数据，我想显示 yAxis stackLabels ，并将其设置为 yAxis 以下图片如下：

下面是我的核心代码，我创建了一个 jsfiddle 来显示结果：

$(function () {
    $('#container').highcharts({

        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:30, //it will won't display labels if y is greater than 0
                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: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});

我发现如果我将 y 的值设置为大于0，则不会显示堆栈标签。

任何人都可以帮助我，非常感谢！

stackLabels: {
    enabled: true,
    verticalAlign: 'bottom',
    y:30, //it will won't display labels if y is greater than 0
    style: {
        fontWeight: 'bold',
        color: 'gray'
    },
    formatter: function() {
        return this.stack;
    }
}

Answer 1

默认情况下就像你说的那样

我发现如果我将y的值设置为大于0，则不会显示stacklabels

要获得所需的行为，您必须执行以下操作：

1＆gt;在每个堆栈中添加带负值的额外系列。

    series: [{
      name: 'test',
      data: [-1, -1, -1, -1, -1],
      stack: 'male',
      color: 'transparent', //transparent color 
      showInLegend: false,  //hide legend
    }, {
      name: 'tests',
      data: [-1, -1, -1, -1, -1],
      stack: 'female',
      color: 'transparent',
      showInLegend: false,
    }, {
      name: 'John',
      data: [5, 3, 4, 7, 2],
      stack: 'male'
    }, {
      name: 'Joe',
      data: [3, 4, 4, 2, 5],
      stack: 'male'
    }, {
      name: 'Jane',
      data: [2, 5, 6, 2, 1],
      stack: 'female'
    }, {
      name: 'Janet',
      data: [3, 0, 4, 4, 3],
      stack: 'female'
    }]

2 - ;在stackLabel的{{1}}属性中，您必须隐藏正值堆栈标签

yAxis

3＆gt; formatter: function() { if (this.isNegative) { return this.stack; } }值应从0开始显示隐藏负值，

yAxis

4＆gt;同样，工具提示不应在负值上激活

    labels: {
        formatter: function() {
          console.log(this.value)
          if (this.value > -1) {
            return this.value
          }

        }
      },

应用此输出

＆＃13;

 tooltip: {
      formatter: function() {
        if (this.y > -1) {
          return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Stack: ' + this.series.options.stack;
        } else {
          return false;
        }

      }
    },

＆＃13;

$(function() {
  $('#container').highcharts({

    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,
      labels: {
        formatter: function() {
          if (this.value > -1) {
            return this.value
          }

        }
      },
      title: {
        text: 'Number of fruits'
      },
      stackLabels: {
        enabled: true,
        verticalAlign: 'bottom',
        y: 0,
        style: {
          fontWeight: 'bold',
          color: 'gray'
        },
        formatter: function() {
          if (this.isNegative) {
            return this.stack;
          }
        }
      }
    },
    tooltip: {
      formatter: function() {
        if (this.y > -1) {
          return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Stack: ' + this.series.options.stack;
        } else {
          return false;
        }

      }
    },

    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },

    series: [{
      name: 'test',
      data: [-1, -1, -1, -1, -1],
      stack: 'male',
      color: 'transparent',
      showInLegend: false,
      tooltip: {
        pointFormat: ''
      }
    }, {
      name: 'tests',
      data: [-1, -1, -1, -1, -1],
      stack: 'female',
      color: 'transparent',
      showInLegend: false,
      tooltip: {
        pointFormat: ''
      }
    }, {
      name: 'John',
      data: [5, 3, 4, 7, 2],
      stack: 'male'
    }, {
      name: 'Joe',
      data: [3, 4, 4, 2, 5],
      stack: 'male'
    }, {
      name: 'Jane',
      data: [2, 5, 6, 2, 1],
      stack: 'female'
    }, {
      name: 'Janet',
      data: [3, 0, 4, 4, 3],
      stack: 'female'
    }]
  });
});

＆＃13;

Answer 2

您可以简单地使用CSS（请参阅https://www.highcharts.com/docs/chart-design-and-style/style-by-css）：

.highcharts-stack-labels text {
  transform: translate(0, 20px);
}

您的小提琴已更新：https://jsfiddle.net/beaver71/jraw54c2/

如何在Highcharts中的yAxis下制作yAxis stackLabels？

2 个答案: