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

Posted 2021-03-28

对于我正在研究的项目，我正在尝试以交互方式突出显示我使用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_;

然后你可以随意画画。