javascript - Dygraphs 在鼠标光标处绘制垂直线

Question

我想在 Dygraph 图上绘制一条全高的垂直线，它遵循光标的精确 x 位置(注意:我希望它在点之间跟随光标，而不仅仅是捕捉到点)

Dygraphs 是否提供允许这样做的回调选项？

作为奖励，是否可以通过同步让它很好地发挥作用？

到目前为止，我已尝试在 Canvas 上添加一个 mousemove 事件监听器，以便在每个 mousemove 事件上画一条线。这最终只会堵塞情节，因为我无法清除之前绘制的线条，它们只会在每次 mousemove 事件中堆积!

非常感谢任何帮助。

干杯，

P

编辑:我可能取得了一些进展。这是 hacky，但确实提供了光标后一行的视觉效果。但是，它也会覆盖 Dygraphs 的点突出显示行为。我仍然需要突出显示图例中最近点值的同步和显示。

const plot = new Dygraph(...)

function getCursorPosition(canvas, event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  return [x, y]
}

canvas.addEventListener('mousemove', function(e) {
  // redraw the plot
  const xrange = plot.xAxisRange();
  plot.updateOptions({dateWindow: xrange});

  // add a line
  const [x, y] =getCursorPosition(canvas, e);
  const { height } = canvas;
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, height);
  ctx.closePath();
  ctx.stroke();
});

Answer 1

看看 hairlines demo ，它使用 Dygraph.Plugins.Crosshair插入。这会使用 select 和 deselect 事件跟踪突出显示的点，并在自己的 Canvas 上绘制细线。

听起来您已经接近 mousemove 事件了。我不确定 canvas 在您的示例中指的是什么，但它应该是您自己创建并覆盖在 dygraph 图表上的，就像在 Crosshair 示例中一样。然后你只需要在画线之前清除 Canvas :

  // add a line
  const [x, y] =getCursorPosition(canvas, e);
  const { height, width } = canvas;
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, height);
  ctx.closePath();
  ctx.stroke();

您可能还对 hairlines demo 感兴趣.您可以左右拖动“旗帜”。他们从发际线与曲线相交的地方取样。