Dygraphs 在鼠标光标处绘制垂直线答案

【问题标题】：Dygraphs drawing a vertical line at mouse cursorDygraphs 在鼠标光标处绘制垂直线
【发布时间】：2019-11-03 10:51:17
【问题描述】：

我想在 Dygraph 图上绘制一条完全高度的垂直线，该线跟随光标的精确 x 位置（注意：我希望它跟随点之间的光标，而不仅仅是捕捉到点）

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

作为奖励，是否有可能让它与同步配合得很好？

到目前为止，我已经尝试在画布上添加一个 mousemove 事件侦听器，以便在每个 mousemove 事件上画一条线。这最终只会堵塞情节，因为我无法清除之前绘制的线条，它们只是随着每个 mousemove 事件而积累！

非常感谢任何帮助。

干杯，

edit：我可能已经取得了一些进展。这很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();
});

【问题讨论】：

标签： javascript dygraphs

【解决方案1】：

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

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

  // 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 感兴趣。您可以左右拖动“旗帜”。他们从发际线穿过曲线的任何地方取样。

【讨论】：

谢谢，我会看看细线，以前没有遇到过。 canvas 指的是 Dygraph 自己的画布，但在顶部覆盖相同大小的画布是更好的解决方案。昨天我确实通过使用g.updateOptions({dateWindow: g.xAxisRange()}) 触发重绘 Dygraph 画布取得了更多进展，但这开始影响帧速率，并且随着我添加更多同步绘图只会恶化！
最后我选择了叠加方法，效果很好。必须添加合成事件生成来克隆 Dygraphs div 上的“鼠标悬停”事件。还有另一个关于确定鼠标移动是否属于 Dygraph 的绘图区域的问题，但如果我很快找不到答案，将打开另一个 SO 问题。干杯，P
尝试设置pointer-events: none 使您的画布对事件透明。 developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 或者您可以制作自定义交互模型。
啊，谢谢，我已经重构了我的代码以使用它，现在一切正常。

【解决方案2】：

您需要安装 dygraphs 和 types/dygraphs npm i dygraphs --save npm i @types/dygraphs --save

然后你需要插入这些行来使用插件：

require('./../../../../node_modules/dygraphs/src/extras/synchronizer.js'); declare var Dygraph:any;

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

this.graph = new Dygraph(document.getElementById("graph"), this.data, { legend: 'always', drawPoints: true, animatedZooms: true, showRoller: true, plugins: [ new Dygraph['Plugins'].Crosshair({ direction: "vertical" }), ] })

我让它在带有 Crosshair 插件的 Angular 8 中工作。您可以在其他框架中执行类似操作。

【讨论】：