dygraph.js交互式区域突出显示

Question

对于我正在从事的项目，我试图以交互方式突出显示使用dygraphs.js绘制的图形的某些区域。 这就是我想要的：

因此，每次用户单击复选框时，图形的一部分将突出显示。在dygraphs网站上，使用以下代码给出了一个示例（无用户交互）：

    RegexOptions options = RegexOptions.None;
                    Regex regex = new Regex("[\n]{2,}", options);
                    string adjRow = regex.Replace(tempRow, "\n");

他们正在使用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); } } 选项，该选项在绘制图表之前被调用，并提供用于在（http://dygraphs.com/options.html#underlayCallback）上绘制的画布上下文。

但是，由于单击突出显示按钮时我的图形已经存在，因此我无法使用此方法。为了完成这项工作，每次用户单击高亮按钮时，我都必须重新绘制完整的图形。 有谁知道以一种更具交互性和动态性的方式使这项工作有效的方法？

Answer 1

您可以使用以下方法从graph变量获取图形的画布：

var canvas = g.canvas_ctx_;

然后，您可以根据需要使用它。