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

Question

对于我正在进行的项目，我试图以交互方式突出显示我使用 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)。

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

Answer 1

您可以通过以下方式从图形变量中获取图形的画布：

var canvas = g.canvas_ctx_;

那你就可以随意画了。