Javascript 在鼠标光标处绘制垂直线的动态图

我想在动态曲线图上画一条全高垂直线，沿着光标的精确x位置（注意：我想在点之间跟随光标，而不仅仅是捕捉到点）

动态图提供的回调选项是否允许这种情况

作为一种奖励，是否有可能使它与同步配合得很好

到目前为止，我已经尝试在画布上添加一个mousemove事件监听器，以便在每个mousemove事件上画一条线。因为我无法清除前面画的线，所以这会阻塞整个情节，它们只会聚集在每一个mousemove事件中

非常感谢您的帮助

干杯

p

编辑：我可能取得了一些进展。这有点老套，但确实给人一种光标后面有一条线的视觉效果。但是，它也会覆盖动态图的点突出显示行为。我仍然需要点突出显示以同步和显示图例中最近的点值

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();
});

看看使用插件的。这将使用

选择

和

取消选择

事件跟踪高亮显示的点，并在其自己的画布上绘制发际线

听起来你已经接近mousemove事件了。我不确定在您的示例中，

canvas

指的是什么，但它应该是您自己创建并覆盖在动态图表上的，就像十字线示例中一样。然后，您只需在绘制线之前清除画布：

//添加一行
const[x，y]=getCursorPosition（canvas，e）；
常数{高度，宽度}=画布；
ctx.clearRect（0，0，宽度，高度）；
ctx.beginPath（）；
ctx.moveTo（x，0）；
ctx.lineTo（x，高度）；
ctx.closePath（）；
ctx.stroke（）；

---

你可能也对这个项目感兴趣。您可以左右拖动“标志”。它们从发际线穿过曲线的任何地方采样。

您需要安装动态图和类型/动态图

npm i动态图-保存
npm i@types/dygraphs——保存

然后，您需要插入以下行以使用插件：

require（'./../../../../../node_modules/dygraphs/src/extras/synchronizer.js'）
声明var动态图：任意

根据您的项目更改require字符串中的路径，您可以在创建图形时使用插件。正在工作的项目中的示例代码：

this.graph=new Dygraph（document.getElementById（“graph”），
这个数据,，
{
传说：“永远”，
支点：对，
动画缩放：对，
是的，
插件：[
新的动态图['Plugins'].十字线({
方向：“垂直”
}),
]
})

我在Angular 8中使用了Crosshair插件。您可以在其他框架中执行类似的操作。
谢谢，我将查看发际线，以前从未遇到过这些发际线
canvas
指的是动态图自己的画布，但在顶部覆盖大小相同的画布是更好的解决方案。我昨天确实取得了更大的进步，通过使用
g.updateOptions（{dateWindow:g.xAxisRange（）}）
触发了动态图画布的重画，但这开始影响帧速率，并且随着我添加更多同步绘图，这只会恶化！我最终选择了叠加方法，效果很好。必须添加合成事件生成以克隆动态图分区上的“mouseover”事件。对于确定mousemove是否位于动态图的绘图区域，我还有一个问题，但如果我很快找不到答案，将打开另一个SO问题。干杯，PTry设置
指针事件：无
，使画布对事件透明。或者你可以做一个自定义的交互模型。啊，谢谢，我已经重构了我的代码来使用它，现在一切都正常了。