Question

我的问题是我的柱形图中的堆栈标签被剪裁了。我有这个柱形图，显示负值和正值。它显示与参考数据相比的百分比，因此当列具有与参考数据相同的值时，0将是0，然后与该参考数据相比，它可以是+％或 - ％。我的问题是，当我对某些条形图的值非常低，并且在其中一条条形图上可能有30％时，图表的+侧会使其标签被剪裁。有什么方法可以围绕这个编码，以便标签始终完全可见。我的客户要求标签应该与图表中的标签一样，即旋转90度。

提前感谢您对如何解决此问题的任何见解。

$(function () {
    $('#container').highcharts({
        chart: { type: 'column', animation: false },
        title: { text: null },
        xAxis: { categories: ['Category 1', 'Category 2', 'Category 3'], labels: { style: { fontSize: '1.2em'}} },
        yAxis: {
            allowDecimals: false, title: { text: '' },
            labels: { 
                formatter: function () { return this.value === 0 ? '0% (Index)' : this.value + '%'; }, 
                style: { color: '#4572A7'} 
            },
            stackLabels: {
                enabled: true, style: { color: 'black', fontSize: '1.2em' },
                formatter: function () { 
                    return this.stack + ((this.total && this.total != 0) ? ': ' +             
                           Math.round(this.total).toFixed(0) + '%' : ''); 
                },
                rotation: -90, x: -5, verticalAlign: 'bottom', align: 'left', textAlign: 'left'
            }
        },
        plotOptions: { column: { stacking: 'normal', pointPadding: 0.3 }, series: { shadow: false, animation: false } },
        tooltip: { enabled: false },
        legend: { borderWidth: 1, shadow: false },
        series: [
            { data: [34, 64, -443], stack: 'Stack 1'}
        ]       
    });
});

（参见附件jsFiddle：http://jsfiddle.net/ewCZa/）

Answer 1

我创建了一个简单的解决方案来防止裁剪标签：http://jsfiddle.net/43fBB/

        events: {
            load: function(){
                var chart = this,
                    cols = chart.series[0],
                    stacks = chart.yAxis[0].stacks,
                    i,
                    j;
                for(i in stacks){
                    var stack = stacks[i];
                    for(j in stack){
                        var label = stack[j].label,
                            labelBB = label.getBBox(),
                            diff = labelBB.y - labelBB.height;

                        if(diff < 0) {
                            label.attr({
                                translateY:  - diff
                            })
                        }
                    }
                }
            }
        }

使用负值剪切柱形图中的标签

1 个答案: