2012-10-11 13 views
6

jQueryのプロット水平積み上げ棒グラフ、このような何か:表示値 - 私は(水平およびスタック)FLOTバーチャート上のバー内の値を表示したいと思い

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

私はこれを見ましたポスト: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

積み上げ棒をサポートするために浮動小数点数を更新しました。更新されたexamplesを参照してください。他の機能が必要な場合は、私に電子メールを送り、問題を開いてください。私は偶然この質問を見ました。

+0

ありがとうございます! :) –

+0

第1の質問:どのように番号をフォーマットできますか? 2番目の質問:マウスのホバーでこれらの値を表示するにはどうすればよいですか?ありがとう。 @dinosaurwaltz –

1

FLOT-barnumbersが積み上げ棒グラフをサポートしていないようです。だから、値が不適切にラベル付けされているのです。積み上げ棒グラフを実装するためのjQueryプラグインであるjqBarGraphの使用をお勧めします。

http://workshop.rs/jqbargraph/

私はそれが役立つことを願っています。

0

最終的にHighcharts Pluginを使用することを決定しました。これは文書化されているほうがはるかに優れているため、うまく機能します。