jquery - 将标注添加到浮动

Question

有没有办法在 flot 中添加标注？我正在使用 flot 来绘制油箱液位以及显示油箱何时变空的估计值的计算线。我想添加一个标注，指向水箱为空的日期。见附图。即使您在浮动中缩放/平移，标注也应指向给定日期。即“标注箭头”的角度随着您平移而变化。

Answer 1

您不会在 flot API 中找到这种特定需求。如果我是你，我会自己在画布上画出来。 这是我放在一起的一个简单示例：

绘图代码：

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