highcharts - Highcharts 堆积条形负/正总

Question

我有一个这样的堆积条形图：http: //jsfiddle.net/XFX5T/

我想知道是否可以将负+正值的总和作为堆叠标签。

如果总数为正，则在条形顶部显示标签。如果总数为负数，则在条形底部显示标签。

例如，示例中的葡萄列将有 40 作为标签。

查看了文档，但似乎没有为此的默认配置设置。

stackLabels: {
   enabled: true,
   style: {
     fontWeight: 'bold',
     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
   }
 }

Answer 1

您可以尝试使用 stackLabels 格式化程序。例如：

stackLabels: {
  formatter: function(){
    var sum = 0;
    var series = this.axis.series;

    for (var i in series){
      sum+=series[i].yData[this.x];
    }
    if (sum < 0 && this.isNegative || sum >= 0 && !this.isNegative)
      return sum;
  }
...
}

Answer 2

公认答案的一个缺点是它不适用于分组堆栈，因为您将获得所有堆栈系列的总数，而不仅仅是每个组中的系列。

这是一个适用于分组堆栈的函数（不是很漂亮）：

    function() {
        var stackItem = this;
        var allStacks = stackItem.axis.stacks;
        for (var key in allStacks) {
            if (allStacks[key][stackItem.x] == stackItem) {
                var oppositeKey = stackItem.isNegative ? key.slice(1) : '-' + key;
                var oppositeItem = allStacks[oppositeKey] && allStacks[oppositeKey][stackItem.x];
                if (oppositeItem === undefined) {
                    if (stackItem.total != 0.0) {
                        return Highcharts.numberFormat(stackItem.total, 0);
                    }
                } else {
                    var sum = stackItem.total + oppositeItem.total;
                    if (stackItem.isNegative ^ sum > 0) {
                        return Highcharts.numberFormat(sum, 0);
                    }
                }
            }
        }
    };

注意我是this从格式化程序传递过来的。

这是一个工作示例。

Answer 3

如果您碰巧遇到此问题，但您的 x 轴使用type: 'datetime'，则可以使用此双循环解决方案stackLabels.formatter使其工作：

formatter: function () {
    var sum = 0;
    var series = this.axis.series;

    for (var i = 0; i < series.length; i++){
        for(var j = 0; j < series[i].xData.length; j++) {
            if(series[i].xData[j] == this.x) {
                sum += series[i].yData[j];
                break;
            }
        }
    }

    if(sum < 0 && this.isNegative)
        return sum;
    else if(sum >= 0 && !this.isNegative)
        return sum;

     return;
}

正如这个 JSFiddle演示的那样。