Dygraphs рисование вертикальной линии на курсор мыши - PullRequest
Новая
       12

Dygraphs рисование вертикальной линии на курсор мыши

1 голос
/ 20 июня 2019

Я хотел бы нарисовать вертикальную линию полной высоты на графике Dygraph, который следует за точным положением x курсора (примечание: я хотел бы, чтобы он следовал за курсором между точками, а не просто привязывался к точкам)

Есть ли у Dygraphs опция обратного вызова, которая позволила бы это?

В качестве бонуса можно ли заставить его играть красиво с синхронизацией?

До сих пор я пытался добавить слушатель события mousemove на холст, чтобы нарисовать линию для каждого события mousemove. В результате получается просто засорить сюжет, потому что я не могу очистить предыдущие нарисованные линии, они просто накапливаются при каждом событии перемещения мыши!

Любая помощь высоко ценится.

Приветствия

P

edit: Возможно, я добился определенного прогресса. Это смешно, но дает визуальный эффект линии, следующей за курсором. Тем не менее, он также перезаписывает поведение выделения точек на 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();
});

1 Ответ

1 голос
/ 20 июня 2019

Взгляните на демонстрацию hairlines , в которой используется плагин 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 .Вы можете перетащить «флаги» влево и вправо.Они отбирают образцы там, где линия волос пересекает кривую.

...