Flot棒グラフにティッカーを追加

Question

Flotライブラリを使用してチャートを作成しました。最後の2つのバーの比較を示す目盛りを追加する必要があります。私はどのように私はそれをプロットすることができますどのような方法を使用して棒の高さを得ることができません。

私が探しているものがここにあります。

私はここにあるだけのシンプルな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>