如何在Flot中水平显示堆叠的条形图？

我看到如何显示带有水平条或垂直条的条形图，它们可以垂直“堆叠”，但我找不到如何显示水平和堆叠条形图示例。如何在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>

来源

2012-03-10 OneSolitaryNoob

只需同时指定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/

来源

2012-03-10 07:35:55 Ryley

Ryley非常感谢你，我曾尝试复制你的代码，并我还是我没有得到ST acking酒吧。上面粘贴的代码。 – OneSolitaryNoob 2012-03-11 01:49:11

您可能需要从他们的代码库获取最新版本的flot，您会注意到我在使用jsfiddle中的文件：http://code.google.com/p/flot/source/browse/trunk – Ryley 2012-03-11 03:21:57

啊你说得对。我升级到0.7，现在他们水平堆叠。谢谢！ – OneSolitaryNoob 2012-03-12 17:48:25

如何在Flot中水平显示堆叠的条形图？

回答

相关问题