如何獲得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

嘗試maxPadding在Y軸 - http://jsfiddle.net/zKHAw/

yAxis: { 
      endOnTick: false, 
      maxPadding: 0.1 

     }, 

spacingTop是圖表，而不是你的圖表和圖形之間的空間上方的空間邊緣。