我正在使用 dygraph 绘制一段时间内的温度读数。我希望在 y 轴上添加 2 行代表高/低阈值。
目前这是通过使用 2 个额外的常量数据系列来实现的,但我怀疑有更好的方法。
AnunderlayCallback
似乎是更好的选择,但我不清楚如何使用canvas.fillRect
和g.toComCoords
属性来绘制线条。
目前正在处理下面的示例(http://dygraphs.com/tests/highlighted-region.html),它正在呈现一条垂直线。任何帮助表示赞赏。
var g = new Dygraph(
document.getElementById("div_g"),
data,
{
labels: ['X', 'Est.', 'Actual'],
animatedZooms: true,
underlayCallback: function(canvas, area, g) {
var bottom_left = g.toDomCoords(300, -20);
var top_right = g.toDomCoords(301, +20);
var left = bottom_left[1];
var right = top_right[0];
canvas.fillStyle = "rgba(255, 0, 0, 1)";
canvas.fillRect(right, area.y, 1, area.h);
}
}
);
对于任何有兴趣的人,使用以下方法来达到预期的结果:
underlayCallback: function(canvas, area, g) {
var LowCoords = g.toDomCoords(0, 2.25);
var HighCoords = g.toDomCoords(0, 4);
var high = HighCoords[1];
var low = LowCoords[1];
canvas.fillStyle = 'red';
canvas.fillRect(area.x, low, area.w, 2);
canvas.fillStyle = 'blue';
canvas.fillRect(area.x, high, area.w, 2);
}