将标注添加到flot

Question

有没有办法在flot中添加标注？我正在使用flot绘制坦克水平以及一条计算线，显示坦克到达时的估计值。我想添加一个标注指向坦克将为空的日期。请参见附图。即使缩放/平移flot，标注也应指向给定日期。即当你平移时，“标注箭头”的角度会发生变化。

Answer 1

您不会在flot API中找到此特定需求。如果我是你，我会在画布上自己画画。 Here's a quick example我聚在一起：

绘图代码：

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);