Question

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

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

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

例子中的葡萄专栏将以40为标签。

查看文档，但看起来有nog默认配置设置。

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);
                    }
                }
            }
        }
    };

N.b。我从格式化程序中传递this。

这是working example。

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;
}

正如this JSFiddle所示。

Highcharts堆积条形负/正总数

3 个答案: