Question

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

Dygraphs是否提供了允许该操作的回调选项？

作为奖励，是否有可能使其在同步中表现出色？

到目前为止，我已经尝试在画布上添加一个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事件跟踪突出显示的点，并在其自己的画布上绘制一条发际线。

这听起来像您与mousemove事件密切相关。我不确定canvas在您的示例中指的是什么，但是应该像在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感兴趣。您可以左右拖动“标志”。他们从发际线穿过曲线的任何地方采样。

Answer 2

您需要安装图表和类型/图表 require('./../../../../node_modules/dygraphs/src/extras/synchronizer.js');

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

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

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

alter table Users add constraint ck_gender check (Gender in ('MALE', 'FEMALE'));

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

dygraph在鼠标光标处绘制垂直线

2 个答案: