2013-01-09 119 views
4

當我創建堆疊條形圖時,最右邊的「框」沒有在右側繪製邊框。Highcharts堆疊條形圖邊框不顯示在右側

有沒有一個選項或者我可以在Highcharts中設置的東西來強制白色邊框線在下面圖像中的75%框的周圍繪製?

下面是我用來測試的jsfiddle鏈接: http://jsfiddle.net/zKgsF/

Image of the problem

請注意:在顯示BorderWidth屬性設置爲大於1級的作品,但最右邊的邊框比薄得多其他。看到下面的圖片。

borderWidth to 5

下面是圖表的JavaScript:

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'bar', 
      backgroundColor: 'rgba(0,0,0,.3)', 
      margin: [15,6,15,15], 
     }, 
     xAxis: { 
      categories: [''] 
     }, 
     credits: { 
      enabled: false 
     }, 
     yAxis: { 
      gridLineColor: "#FF0000", 
      labels: 
      { 
      align: 'right', 
      formatter: function() 
      { 
       return this.value + "%"; 
      } 
       }, 
     }, 
     tooltip: { 
       formatter: function() 
      { 
         return "<b>" + this.series.name + '</b>: ' + this.y + ' (' +   Math.round(this.percentage,1) + "%)"; 
       } 
      }, 
     plotOptions: { 
       bar: { 
        animation: false, 
        stacking: 'percent', 
        borderWidth: '1', 
        dataLabels: { 
         enabled: true, 
         color: 'white', 
         formatter: function() { 

          if (this.percentage < 10) 
          { 
           return "" 
          } 
          else 
          { 
           return Math.round(this.percentage,1) + "%"; 
          } 
         }, 
         style: { 
          fontSize: '18px' 
         } 

        } 
       } 
     }, 
     series: [{ 
      data: [30]   
     },{ 
      data: [10]   
     }] 
    }); 
}); 

編輯:

看起來像它的不相關的柱狀圖爲 「可堆疊」。這可能與圖表達到最大'y'值軸有關......如另一個示例中所示:http://jsfiddle.net/zKgsF/1/

+1

不知道該怎麼做,但如果它可以幫助你,你可以使用一個技巧。將yAxis的最大值設置爲101,並在labels.formatter選項中放入不打印大於100的y值的條件。看看jsfiddle:http://jsfiddle.net/zKgsF/23/ – cubbuk

回答

3

Cubbuk所示,您可以通過將值調整爲max yAxis。

另外,您也可以指定endOnTick屬性。

max: 100.1, 
endOnTick: false 

對於API導航here和這裏是一個example