2013-12-11 42 views
2

當前正在使用jqplot中的堆棧條形圖。我的疑問是如何將欄上顯示的值移到欄的下方?如何將欄上顯示的值向下移動?

fiddle avail at here

$(document).ready(function(){ 
var yAxisLabels = ["Label1", "Label2", "Label3", "Label4"]; 
var legendValues = ["series1", "series2", "series3", "series4"]; 
var pLabels1 = ['70%','38%','71%','28%']; 
var pLabels2 = ['27%','49%','27%','44%']; 
var pLabels3 = ['2%','10%','2%','17%']; 
var pLabels4 = ['1%','4%','1%','12%']; 
var group4 = [52,528,129,264]; 
var group3 = [94,1388,394,401]; 
var group2 = [1446,7130,5591,1004]; 
var group1 = [3772,5512,14957,633]; 
    var series = [ 
         { pointLabels: { labels: pLabels4 }}, 
         { pointLabels: { labels: pLabels3 }}, 
         { pointLabels: { labels: pLabels2 }}, 
         { pointLabels: { labels: pLabels1 } }]; 
var plot = $.jqplot('chart', [[[52,1],[528,2],[129,3],[264,4]], [[94,1],[1388,2],[394,3],[401,4]], [[1446,1],[7130,2],[5591,3],[1004,4]], [[3772,1],[5512,2],[14957,3],[633,4]]], { 
       stackSeries: true, 
       seriesDefaults: { 
        shadow: false, 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { fillToZero: true, barDirection: 'horizontal', highlightMouseOver: true}, 
        pointLabels: { 
         show: true, stackedValue: true, location: 'w', hideZeros: true 
        } 
       }, 
       axes: { 
        xaxis: { 
         tickOptions: { 
          show: true, 
          mark: 'cross', 
          formatString: "%'d", 
          showGridline: true 
         }, 
         min: null, 
         max: null, 
         showTickMarks: true 
        }, 
        yaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: yAxisLabels 
        } 
       }, 
       grid: { 
        gridLineColor: '#ffffff', /**/ 
        borderColor: '#509790', 
        shadowWidth: 0, 
        borderWidth: 0, 
        background: 'rgba(0,0,0,0)', 
        shadow: false 
       },    
       series: series 
      }); 
}); 

回答

1

這裏是解決方案:Jsfiddle link

只需添加css類圖div元素和父元素jqplot點標籤類組合的名字。 看,因爲它會更有意義有

.chart .jqplot-point-label { 
    margin-top:50px; 
} 
+0

好吧,多數民衆贊成罰款,但如何顯示的小尺寸格擋值的值的jsfiddle? –

+0

如何顯示藍色條塊的值? –

+0

如果空間不可用,jqplot將不繪製值。如果你仍然想要得到這些值,你必須改變源代碼。 – Gyandeep

相關問題