2012-03-10 160 views
4

我看到如何顯示帶有水平條或垂直條的條形圖,它們可以垂直「堆疊」,但我找不到如何顯示水平和堆疊條形圖示例。如何在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非常感謝你,我曾嘗試複製你的代碼,並我還是我沒有得到ST acking酒吧。上面粘貼的代碼。 – OneSolitaryNoob 2012-03-11 01:49:11

+0

您可能需要從他們的代碼庫獲取最新版本的flot,您會注意到我在使用jsfiddle中的文件:http://code.google.com/p/flot/source/browse/trunk – Ryley 2012-03-11 03:21:57

+0

啊你說得對。我升級到0.7,現在他們水平堆疊。謝謝! – OneSolitaryNoob 2012-03-12 17:48:25