浮动比较条形图

Question

我正在尝试在 Flot 中生成一个图表，其中一个数据集具有多个彼此相邻的堆叠条，第二组堆叠条作为显示在主图表下方但呈一定角度的第二个数据集。下图显示了我的追求

有什么方法可以轻松做到这一点吗？我知道有一个插件可以让我把横条放在一起，但这并不是我真正想要的。

我已经让它按照我想要的方式渲染一个数据集，但我不知道如何处理第二个数据集。

Answer 1

您可以使用几个 divs 和一些 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/