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