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/