jquery - flot へのコールアウトの追加

Question

flot にコールアウトを追加する方法はありますか? 私は flot を使用して、タンクのレベルと、タンクが空になったときの推定値を示す計算された線をプロットしています。タンクが空になる日付を示すコールアウトを追加したいと考えています。添付の図を参照してください。フローでズーム/パンした場合でも、コールアウトは指定された日付を指す必要があります。つまり、パンすると「コールアウト矢印」の角度が変わります。

Answer 1

この特定のニーズはflotAPIにはありません。もし私があなたなら、それを自分でキャンバスに描きます。 これが私が一緒に投げた簡単な例です：

図面コード：

somePlot = $.plot($("#placeholder"), [ d1, d2, d3 ]);

canvas = somePlot.getCanvas();
context = canvas.getContext("2d");

var w = 100;
var h = 30;
var radius = 5;
var width = context.canvas.clientWidth;
var height = context.canvas.clientHeight;    

var x = (width - (width * .25));
var y = (height - (height * .3));
var r = x + w;
var b = y + h;
context.beginPath();
context.strokeStyle="green";
context.lineWidth="4";
context.moveTo(x+radius, y);
context.lineTo(r-radius, y);
context.quadraticCurveTo(r, y, r, y+radius);
context.lineTo(r, y+h-radius);
context.lineTo(width, somePlot.getAxes().xaxis.box.top);
context.lineTo(x+radius, b);
context.quadraticCurveTo(x, b, x, b-radius);
context.lineTo(x, y+radius);
context.quadraticCurveTo(x, y, x+radius, y);
context.stroke();

context.textAlign = "center";
context.textBaseline = "middle";
context.font = "bold 15px 'Times New Roman', Times, serif";
context.fillText("SomeText", x + w/2, y + h/2);