reactjs - 有没有办法根据 Rechart 中的 activeDot 更改值？

Question

我目前正在 recharts 中创建一个图表，如下所示:

      <h3>Stock</h3>
      <h3>TARGET POINT TO CHANGE HERE</h3>
      <div class="chartContainer">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={800}
          height={250}
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="date" tick={false} />
          <YAxis dataKey="close" tick={false} domain={[low, high]} />
          <Tooltip />
          <Line type="monotone" dataKey="close" stroke="turquoise" activeDot={{ r: 4 }} />
        </LineChart>
      </ResponsiveContainer>
      </div>

我希望将 TARGET POINT TO CHANGE HERE 的值更改为 activeDot 悬停的任何位置的 y 值(类似于 RobinHood)。有人知道该怎么做吗？

Answer 1

创建一个 useState Hook 来存储 y 值:

const [value, setValue] = useState("")

向折线图添加一个触发器，该触发器将更新值并更改 h3:

 <h3>Stock</h3>
  <h3>{value}</h3>
  <div class="chartContainer">
  <ResponsiveContainer width="100%" height="100%">
    <LineChart
      width={800}
      height={250}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5,
      }}
      onMouseMove={e => { 
       setValue(e.activePayload[0].value)
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="date" tick={false} />
      <YAxis dataKey="close" tick={false} domain={[low, high]} />
      <Tooltip />
      <Line type="monotone" dataKey="close" stroke="turquoise" activeDot={{ r: 4 }} />
    </LineChart>
  </ResponsiveContainer>
  </div>