Добавьте вертикальную линию в диаграмме реагирования, где указатель мыши находится - PullRequest
Новая
       34

Добавьте вертикальную линию в диаграмме реагирования, где указатель мыши находится

2 голосов
/ 08 марта 2019

Я оцениваю реакцию. Допустим, у меня есть реагирует на простой график , как бы вы добавили вертикальную линию, которая перемещается мышью при наведении графика? Я предполагаю, что мне нужно добавить компонент перекрестия внутри XYPlot, и, возможно, компонент YAxis. Но я не понимаю, как, и я не могу найти соответствующие примеры. 

function Chart({data}) {
  return <XYPlot width={400} height={300}><XAxis/><YAxis/>
    <HorizontalGridLines />
    <VerticalGridLines />
    <LineMarkSeries data={data} />
    </XYPlot>;
}

1 Ответ

0 голосов
/ 26 июня 2019

Можно добавить вертикальную линию с компонентом <Crosshair />.Вы можете использовать этот пример в документации здесь .Вам нужно установить обработчики onMouseLeave и onNearestX, чтобы обновить значение строки Crosshairs.Хитрость в том, что вы должны поместить divs внутри компонента Crosshair, чтобы он не отображал поле значения.Я использую React Hooks для ответа на ваш вопрос, но вы могли бы использовать состояние с классом ( React Hooks State Docs ). 

import React, { useState } from 'react';

function Chart({data}) {
  const [points, setPoints] = useState([]);

  return <XYPlot
    width={400}
    height={300}
    onMouseLeave={() => setPoints([])}
    >
    <XAxis/>
    <YAxis/>
    <HorizontalGridLines />
    <VerticalGridLines />
    <LineMarkSeries
      data={data}
      onNearestX={v => setPoint([v])}
    />
    <Crosshair values={point}>
      {/* Divs inside Crosshair Component required to prevent value box render */}
      <div></div>
    </Crosshair>
  </XYPlot>;
}
...