2012-10-11 109 views
6

我想顯示的海軍報線圖上的條中的值(水平和堆疊),像這樣:顯示值 - jQuery的情節水平堆積條形圖

|------------------------------------------- 
|     5     | 1 | 
|------------------------------------------- 
| 
|------------------------------------ 
|   3   |  2  | 
|------------------------------------ 

我看到這個post:Show value within bar on flot bar chart 這些值只出現在第一個堆積條內。第二個值是當前共有,而不是當前巴,例如相應值:

|------------------------------------------- 
|     5 6    |  | 
|------------------------------------------- 
| 
|------------------------------------ 
|   3 5  |   | 
|------------------------------------ 

難道有人知道這個功能的一個很好的插件? 另外,我想增加欄內的字體大小。

謝謝!


下面的代碼:

<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script> 

var data = [ 
     {label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]}, 
     {label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]} 
]; 

//reverse data for horizontal 
for (series in data){ 
    var s = data[series]; 
    for (i=0;i<s.data.length;i++){ 
      var tmp = s.data[i][0]; 
     s.data[i][0] = s.data[i][1]; 
     s.data[i][1] = tmp;   
    } 
} 

var options = { 
    series: { 
     stack: 0, 
     lines: {show: false, steps: false }, 
     bars: { 
      show: true, 
      barWidth: 0.5, 
      align: 'center', 
      horizontal: true, 
      showNumbers: true 
     }, 
    }, 
    yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]}, 
}; 

$.plot($("#flot-example-2"), data, options); 
+0

你能發表你的代碼嗎? http://codepen.io/pen/ –

+0

對不起,我剛添加了代碼,謝謝! –

+0

您可以在這裏看到演示:http://codepen.io/anon/full/mrbdK –

回答

5

我已經更新了flot-barnumbers以支持堆疊酒吧,請參閱更新的examples。如果您需要任何其他功能,請給我發電子郵件或打開問題,我只是偶然看到這個問題。

+0

謝謝! :) –

+0

第一個問題:我如何格式化數字?第二個問題:我如何才能在鼠標懸停時顯示這些值?謝謝。 @dinosaurwaltz –

1

看來,海軍報,barnumbers不支持堆疊條形圖。這就是爲什麼價值標籤不當。我建議使用jqBarGraph,它是jQuery插件來實現堆積的條形圖。

http://workshop.rs/jqbargraph/

我希望它幫助。

0

我終於決定使用Highcharts Plugin,因爲它有更好的文檔記錄,它運作良好!