如何获得highcharts barChart栏以始终填充容器？

Question

相同的代码生成两个图像。在第一个图像中，div（蓝色边框）很好地填充。在第二张图片中，左上方有足够的空间。我希望它能像第一张图片一样填充div。 spacingTop：0似乎没有任何效果。我应该使用其他一些设置吗？

以下是代码：

    new Highcharts.Chart({
    chart: {
        animation: false,
        renderTo: data.id,
        type: 'column',
        height: data.height,
        backgroundColor: 'transparent',
        spacingTop: 0
    },
    title: {
        text: ''
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    var point = this.point;
                    setTimeout(function() {
                        point.dataLabel.attr({
                            y: point.name/1 > 0 ? point.plotY - 20 : point.yBottom - 20
                        });
                    });
                    return point.name;
                }
            },
            pointWidth: 40,
            borderWidth: 0
        },
        series: {
            animation: false
        }
    },
    xAxis: {
        categories: [ data.labelActual, data.labelDelta, data.labelPlan ],
        lineColor: '#CCCCCC',
        labels: {
            style: {
                whiteSpace: 'nowrap', // This is not working
                width: '200px' // This is the workaround
            }
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        gridLineWidth: 0,
        labels: {
            formatter: function() {
                if ((valuePlan < 0 || valueActual < 0) && this.value === 0) {
                    return '0';
                }
                return '';
            }
        },
        plotLines: [ {
            value: 0,
            color: '#CCCCCC',
            width: 1
        } ],
        opposite: true
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    series: [ {
        data: [
                {
                    y: valueActual,
                    low: 0,
                    name: valueActual,
                    color: {
                        linearGradient: [ 0, 0, 0, 100 ],
                        stops: [ [ 0, '#7F7F7F' ], [ 1, '#DDDDDD' ] ]
                    },
                    dataLabels: {
                        enabled: true,
                        y: valueActual < 0 ? 13 : -5,
                        style: {
                            color: '#7F7F7F'
                        }
                    }
                },
                {
                    y: valueActual,
                    low: Math.abs(valueDelta) < 1 ? valueActual - 1 : valueActual - valueDelta,
                    name: valueDelta > 0 ? '+' + valueDelta : valueDelta,
                    color: valueDelta === 0 ? '#7F7F7F' : {
                        linearGradient: [ 0, 0, 0, 100 ],
                        stops: [ [ 0, data.color === 'g' ? '#005712' : data.color === 'r' ? '#CC0000' : '#7F7F7F' ],
                                [ 1, data.color === 'g' ? '#A2C0A8' : data.color === 'r' ? '#E29A9A' : '#DDDDDD' ] ]
                    },
                    dataLabels: {
                        enabled: true,
                        y: valueDelta < 0 ? 13 : -5,
                        style: {
                            color: valueDelta === 0 ? '#7F7F7F' : data.color === 'g' ? '#005712' : data.color === 'r' ? '#CC0000' : '#7F7F7F'
                        }
                    }
                }, {
                    y: valuePlan,
                    low: 0,
                    name: valuePlan,
                    color: {
                        linearGradient: [ 0, 0, 0, 100 ],
                        stops: [ [ 0, '#7F7F7F' ], [ 1, '#DDDDDD' ] ]
                    },
                    dataLabels: {
                        enabled: true,
                        y: valuePlan < 0 ? 13 : -5,
                        style: {
                            color: '#7F7F7F'
                        }
                    }
                } ]
    } ],
    tooltip: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});

Answer 1

在yAxis中尝试maxPadding - http://jsfiddle.net/zKHAw/

 yAxis: {
            endOnTick: false,
            maxPadding: 0.1

        },

spacingTop用于图表上方的空间，而不是图表和图形边缘之间的空间。