flot比较条形图

Question

我正在尝试在Flot中生成一个图表，其中有一个数据集彼此相邻的多个堆叠条形图，另一组堆叠条形图作为第二个数据集显示在主图表下方但是以一定角度关闭。 下图显示了我的目标

有没有办法轻松做到这一点？ 我知道有一个插件可以让我把它们放在一起，但这并不是我所追求的。

我已经让它渲染了一个我想要的数据集，但我不知道如何去做第二个数据集。

Answer 1

您可以使用几个div和一些css来进行堆叠。 只需在每个div放置一个图形，然后将它们绝对放置在包装器div中：

<div id="graph_wrap">
    Comparison Chart
    <div id="graph1"></div>
    <div id="graph2"></div>
</div>

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

示例： http ： //jsfiddle.net/jtbowden/q4N4M/