Highcharts 堆积条形负/正总答案

【问题标题】：Highcharts stacked bar negative / positive totalHighcharts 堆积条形负/正总
【发布时间】：2013-03-14 15:55:31
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： highcharts bar-chart stacked

【解决方案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;
  }
...
}

【讨论】：

完美，我添加了一个额外的检查以仅包含可见的数据：for (var i in series){ if (series[i].visible) sum+=series[i].yData[this.x]; }
太棒了，正是我想要的

【解决方案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。

这是working example。

【讨论】：

【解决方案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 演示的那样。

【讨论】：