將代碼添加到Flot條形圖

Question

我已經使用Flot庫創建了一個圖表。 我需要添加一個刻度線以顯示最后兩個小節之間的比較。 我無法使用任何方法獲取條形圖的高度。

這是我正在尋找的示例。

我已經完成了這里的簡單浮點圖代碼。 我找不到方法，因為找不到任何事件或任何使我身高高低的東西。

 var data = [ {data: [[0,1]], color: "red"}, {data: [[1,2]], color: "yellow"}, {data: [[2,3]], color: "green"} ]; $.plot("#placeholder",data, { series: { bars: { show: true, barWidth: 0.3, align: "center", lineWidth: 0, fill:.75 } }, xaxis: { ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]] } }); 

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <div id="placeholder" style="width: 400px; height: 300px; padding: 0px; position: relative;"></div> 

Answer 1

我有解決辦法。 我可以使用Flot庫本身中的一個標記選項。 它沒有為我提供箭頭，但至少可以為其添加一條線。

 var data = [ {data: [[0,1]], color: "red"}, {data: [[1,2]], color: "yellow"}, {data: [[2,3]], color: "green"} ]; $.plot("#placeholder",data, { series: { bars: { show: true, barWidth: 0.3, align: "center", lineWidth: 0, fill:.75 }, }, grid: { markings: [{ xaxis: { from: 1, to: 2 }, yaxis: { from: 2, to: 2 }, color: "#bb0000" }] }, xaxis: { ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]] } }); 

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <div id="placeholder" style="width: 400px; height: 300px; padding: 0px; position: relative;"></div>