Highcharts叠加列总和正面和负面 [英] Highcharts Stack Column Sum Positive and Negative Together

问题描述

我有一个堆叠的柱状图，显示每个月的3个键/值堆叠在另一个之上。有些月份可能会有负面影响。目前的功能是为每个月的高标贴放两个堆叠的标签。一个用于积极（顶部），另一个用于底部（底部）。

请参阅下面的代码和js小提琴作为示例：

 <$ c $ （
图表：{
类型：'列'
}，
 xAxis ：{'b'b'类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct' Nov'，'Dec'] 
}，
 yAxis：{
 stackLabels：{
 enabled：true，
 align：'center'
} 
}，
 plotOptions：{
列：{
堆栈：'normal'，
 pointPadding：0，
 groupPadding：0，
 dataLabels ：{
启用：false，
颜色：'#FFFFFF'
} 
} 
}，
 
系列：[{
数据：[29.9，-71.5,106.4，-129.2,144.0，-176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
}，{
数据：[144.0,176.0,135.6， 148.5,216.4,194.1,95.6,54.4,29.9,71.5,106.4,129.2] 
}，
 {
数据：[55.9,90.5,106.4,350.2,144.0,52.0,130.6， 148.5，216.4，194.1，95.6，54.4] 
}] 
}）; 
}）; 
  

http://jsfiddle.net/sph1LjtL/

我希望的功能是实际上有一个堆叠标签，其中包含所有三个值的总和，而不是两个单独的标签。所以在二月份（在小提琴中）它会在列的上方显示195，因为266.50 - 71.50 = 195。

我一直在想办法做到这一点，但有因为highcharts将正面和负面视为单独的图表，因此未能成功。任何帮助，将不胜感激！谢谢。

解决方案

这可能是一个解决方案，使用 yAxis.stackLabels.formatter 函数，并在处理积极堆栈时查找负面堆栈。在代码中：

  yAxis：{
 stackLabels：{
 formatter：function（）{
 if（this.total> = 0）{
 if（this.axis.stacks [ -  column] [this.x]！= null）
 return this.total + this.axis .stacks [  - 列] [this.x]。总; 
 else 
 return this.total; 
} 
} 
 // ... 
} 
} 
  

请参阅此更新的JSFiddle 演示其工作原理。

I have a stacked column chart that shows 3 keys / values for each month stacked one on top of the other. Some months may have negatives. The current functionality is for highcharts to put two stacked labels for each month. One for the positives (on top) and one for the negatives (on bottom).

Please see the code below and the js fiddle as an example:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            stackLabels: {
                enabled: true,
                align: 'center'
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                pointPadding: 0,
                groupPadding: 0,
                dataLabels: {
                    enabled: false,
                    color: '#FFFFFF'
                }
            }
        },

        series: [{
            data: [29.9, -71.5, 106.4, -129.2, 144.0, -176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        },
        {
            data: [55.9, 90.5, 106.4, 350.2, 144.0, 52.0, 130.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

http://jsfiddle.net/sph1LjtL/

My desired functionality is to actually have one stacked label that includes the sum of all three values instead of two separate labels. So for February (in the fiddle) it would show 195 above the column because 266.50 - 71.50 = 195.

I have been trying to figure a way to do this but have been unsuccessful because highcharts is treating the positives and negatives as separate charts. Any help would be appreciated! Thank you.

解决方案

This might be one solution, using the yAxis.stackLabels.formatter function, and doing a lookup for a negative stack when processing a positive stack. In code:

yAxis: {
    stackLabels: {
        formatter: function() {
            if(this.total >= 0) {
                if(this.axis.stacks["-column"][this.x] != null)
                    return this.total + this.axis.stacks["-column"][this.x].total;
                else
                    return this.total;
            }
        }
        // ...
    }
}

See this updated JSFiddle demonstration of how it works.

这篇关于Highcharts叠加列总和正面和负面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！