jquery - 流量比较条形图

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/