jquery – 如何在Flot中水平显示堆积的条形图?

发布时间:2020-10-14 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了jquery – 如何在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>

解决方法

只需指定stack:true并在条形图中定义horizo​​ntal:true,那应该是…

$.plot($("#placeholder"),data,{
        series: {
            stack: true,horizontal:true }
        }
    });

看到它在这里工作:http://jsfiddle.net/ryleyb/wt6aJ/

总结

以上是编程之家为你收集整理的jquery – 如何在Flot中水平显示堆积的条形图?全部内容,希望文章能够帮你解决jquery – 如何在Flot中水平显示堆积的条形图?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478