[英]flot comparison bar chart
I'm trying to produce a chart in Flot that has multiple stacked bars next to each other for one data set, and a second set of stacked bars as a second data set shown underneath the main chart but off at an angle. 我正在尝试在Flot中生成一个图表,其中有一个数据集彼此相邻的多个堆叠条形图,另一组堆叠条形图作为第二个数据集显示在主图表下方但是以一定角度关闭。 The picture below shows what I'm after
下图显示了我的目标
Is there any way of doing this easily? 有没有办法轻松做到这一点? I know there is a plugin that lets me put the bars next to each other but that's not really what I'm after.
我知道有一个插件可以让我把它们放在一起,但这并不是我所追求的。
I've already got it rendering one data set how I want but I don't know how to go about doing the second data set. 我已经让它渲染了一个我想要的数据集,但我不知道如何去做第二个数据集。
You could use a couple of div
s and some css to do the stacking. 您可以使用几个
div
和一些css来进行堆叠。 Just put one graph in each div
and then absolutely position them within a wrapper div: 只需在每个
div
放置一个图形,然后将它们绝对放置在包装器div中:
<div id="graph_wrap">
Comparison Chart
<div id="graph1"></div>
<div id="graph2"></div>
</div>
CSS: CSS:
#graph_wrap {
width: 700px;
height: 400px;
}
#graph1, #graph2 {
position: absolute;
left: 0px;
top: 0px;
width: 600px;
height: 300px;
margin: 50px;
z-index: 2;
}
#graph2 {
top: -15px;
left: 15px;
z-index: 1;
}
Example: http://jsfiddle.net/jtbowden/q4N4M/ 示例: http : //jsfiddle.net/jtbowden/q4N4M/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.