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

【问题标题】：How can I display stacked barcharts horizontally in Flot?如何在 Flot 中水平显示堆叠的条形图？
【发布时间】：2012-03-10 01:03:56
【问题描述】：

我知道如何在浮动中显示带有水平条或垂直条的条形图，它们可以垂直“堆叠”，但我找不到如何显示水平和堆叠的条形图的示例。

我该怎么做？

这是我的代码，从下面的海报网站复制而来，但条形仍然不会堆叠

<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>

【问题讨论】：

标签： jquery flot bar-chart

【解决方案1】：

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

【讨论】：

Ryley 非常感谢您，我已尝试复制您的代码，但仍然没有堆叠条。上面粘贴的代码。
您可能需要从他们的代码库中获取最新版本的 flot，您会在 jsfiddle 中注意到我正在使用此处的文件：code.google.com/p/flot/source/browse/trunk
啊，你是对的。我升级到 flot 0.7，现在它们水平堆叠。谢谢！