对于我正在研究的项目,我正在尝试以交互方式突出显示我使用dygraphs.js绘制的图形的某些区域。这就是我想要的:
因此,每次用户点击复选框时,图表的一部分都会突出显示。在dygraphs网站上,使用以下代码给出了一个示例(没有用户交互):
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(highlight_start, -20);
var top_right = g.toDomCoords(highlight_end, +20);
var left = bottom_left[0];
var right = top_right[0];
canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
canvas.fillRect(left, area.y, right - left, area.h);
}
}
他们正在使用underlayCallback
选项,该选项在绘制图表之前调用,并提供绘图的画布上下文(http://dygraphs.com/options.html#underlayCallback)。
但是,由于单击高亮显示按钮时我的图形已存在,因此无法使用此方法。为了完成这项工作,每次用户点击突出显示按钮时,我都必须重新绘制完整的图形。有没有人知道如何以更具互动性和动态的方式使这项工作?
您可以从图形变量中获取图形的画布:
var canvas = g.canvas_ctx_;
然后你可以随意画画。