Highcharts堆積條形圖：如何吧

Question

我與highcharts堆疊酒吧工作，並要刪除的條之間的一些空間，這樣我就可以騰出一些文字，我渲染之間移除間隔。

我試過pointPadding和groupPadding但那些不工作。我在xAxis上試過了minPadding/maxPadding，但那也沒有做任何事情。

似乎擺脫空間的唯一方法是改變整個圖表是我真的不想要什麼的寬度。

這裏是我的小提琴：

http://jsfiddle.net/nick1572/dfcysj39/

$("#profit-chart").highcharts({ 

     lang: { 
      thousandsSep: "," 
     }, 
     chart: { 
      type: "column", 
      style: { 
       fontFamily: "Open Sans, sans-serif" 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     title: { 
      text: "" 
     }, 
     xAxis: { 
      //minPadding: 20, Not working here 
      //maxPadding:1, Not working here either 

      categories: [ "other business", "somekind of business profit" ], 
      labels: { 
       style: { 
        color: "#333333", 
        fontSize: "15px" 
       } 
      } 
     }, 
     yAxis: { 
      gridLineDashStyle: "longdash", 
      title: { 
       text: "Dollars" 
      }, 
      labels: { 
       enabled: true, 
       formatter: function() { 
        return "$" + Highcharts.numberFormat(this.value, 0, "", ","); 
       } 
      } 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     plotOptions: { 


      column: { 
       stacking: "normal", 
       dataLabels: { 
        enabled: true, 
        color: "white", 
        inside: true, 
        useHTML: true, 
        style: { 
         fontSize: "18px", 
         fontWeight: "600" 
        } 
       } 
      }, 
      series: { 
       //pointPadding: 0, 
       //groupPadding: 0, this does not work 
       animation: { 
        complete: function() { 

        } 
       }, 

       pointWidth: 145 
      } 
     }, 

     series: [ { 
      color: "#327631", 
      data: [ 0, 850 ], 
      stack: "female", 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0); 


        else return null; 
       } 
      } 

      }, { 
      color: "#ADC9AD ", 
      data: [ 10000, 10000 ], 
      stack: "female", 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        return "$" + Highcharts.numberFormat(this.y, 0); 
       } 
      } 
     }] 

     }, 

     function (chart) { // on complete 

       chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 870, 85) 
        .css({ 
         color: 'green', 
         fontSize: '24px', 
         x: 200 
        }) 
        .add(); 


    });//End HighCharts Call 

提前感謝！

Answer 1

看來，點寬度設置與groupPadding和pointPadding衝突..如果您刪除系列中的pointWidth: 145，並將groupPadding和pointPadding添加到列中，您將移除間距。但是，這些條將佔用圖表的整個可用寬度。

column: { 
     stacking: "normal", 
     groupPadding: 0,//add here 
     pointPadding: 0,//add here 
     ... 
} 

http://jsfiddle.net/dfcysj39/9/

Answer 2

好了，所以我覺得這可能在這一點上解決我的問題。不知道它是否正確，但它的工作原理。 pointPadding和groupPadding部分適用於這個特定的問題。我感謝你Birgit花時間迴應！

我做了什麼來解決這個明確把spacingRight圖表上給繪圖區更多的空間W/O使得杆更寬。我確實回去添加了一些pointPadding，以使美觀更寬一些。這允許呈現呈現的文本。

http://jsfiddle.net/nick1572/dfcysj39/

$("#profit-chart").highcharts({ 

     lang: { 
      thousandsSep: "," 
     }, 
     chart: { 
      spacingRight: 220, 
      type: "column", 
      width: 1200, 
      style: { 
       fontFamily: "Open Sans, sans-serif" 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     title: { 
      text: "" 
     }, 
     xAxis: { 
      //minPadding: 20, Not working here 
      //maxPadding:1, Not working here either 
      categories: [ "other business", "somekind of business profit" ], 
      labels: { 
       style: { 
        color: "#333333", 
        fontSize: "15px" 
       } 
      } 
     }, 
     yAxis: { 
      gridLineDashStyle: "longdash", 
      title: { 
       text: "Dollars" 
      }, 
      labels: { 
       enabled: true, 
       formatter: function() { 
        return "$" + Highcharts.numberFormat(this.value, 0, "", ","); 
       } 
      } 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     plotOptions: { 


      column: { 
       stacking: "normal", 
       dataLabels: { 
        enabled: true, 
        color: "white", 
        inside: true, 
        useHTML: true, 
        style: { 
         fontSize: "18px", 
         fontWeight: "600" 
        } 
       } 
      }, 
      series: { 
       pointPadding: 0.05, 
       //groupPadding: 0, this does not work 
       animation: { 
        complete: function() { 

        } 
       }//, 

       //pointWidth: 145 
      } 
     }, 

     series: [ { 
      color: "#327631", 
      data: [ 0, 850 ], 
      stack: "female", 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0); 


        else return null; 
       } 
      } 

      }, { 
      color: "#ADC9AD ", 
      data: [ 10000, 10000 ], 
      stack: "female", 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        return "$" + Highcharts.numberFormat(this.y, 0); 
       } 
      } 
     }] 

     }, 

     function (chart) { // on complete 

       chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 900, 84) 
        .css({ 
         color: 'green', 
         fontSize: '24px', 
         x: 200 
        }) 
        .add(); 


    });//End HighCharts Call