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/）

4

1 回答 1

0

我创建了简单的解决方案来防止剪裁标签：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
                            })
                        }
                    }
                }
            }
        }
于 2013-05-23T14:30:13.903 回答