2012-03-10 16 views
4

私は水平棒や垂直棒で縦に積み重ねることができるflotでbarchartsを表示する方法を見ていますが、水平で積み重ねられたbarchartsを表示する方法の例は見つかりません。Stacked barchartsをFlotに水平に表示するにはどうすればよいですか?

どうすればよいですか?

ここでは、サイトの下のポスターからコピーされた私が持っているコードは、ですが、それでもバーは

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="flot/jquery.flot.js"></script> 
    <script type="text/javascript" src="flot/jquery.flot.stack.js"></script> 
    <script type="text/javascript"> 

$(function() { 


var d1 = []; 
for (var i = 0; i <= 10; i += 1) 
    d1.push([parseInt(Math.random() * 30),i]); 


var d2 = []; 
for (var i = 0; i <= 10; i += 1) 
    d2.push([parseInt(Math.random() * 30),i]); 

var d3 = []; 
for (var i = 0; i <= 10; i += 1) 
    d3.push([parseInt(Math.random() * 30),i]); 

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: { 
      stack: true, 
      lines: { show:false }, 
      bars: { show: true, barWidth: 0.6, horizontal:true } } }); 

}); 

</script> 

<title>Test</title> 
</head> 

<body> 

<div id="placeholder" style="width:600px;height:300px;"></div> 
</body> 
</html> 

答えて

6

を積み重ねないだろうちょうどそれれるべきであること、の両方stack:trueとあなたのバーで定義horizontal:trueを指定...

$.plot($("#placeholder"), data, { 
     series: { 
      stack: true, 
      lines: { show:false }, 
      bars: { show: true, barWidth: 0.6, horizontal:true } 
     } 
    }); 

それはここで働いてください:http://jsfiddle.net/ryleyb/wt6aJ/

+0

Ryleyはどうもありがとうございました、私はあなたのコードをコピーしようとしている、それは私はまだ目が届かないのですアッキングバー。上に貼り付けられたコード。 – OneSolitaryNoob

+0

最新のバージョンのflotをコードリポジトリから入手しなければならない場合があります。jsfiddleには、ここからファイルを使用していることがわかります。http://code.google.com/p/flot/source/browse/trunk – Ryley

+0

あなたは正しいです。私は0.7にアップグレードし、現在は横に積み重ねています。ありがとう! – OneSolitaryNoob

関連する問題