Reactjs 有没有办法根据 Rechart 中的 activeDot 更改值

发布于01月10日

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

      <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的值更改为active Dot当前悬停的y值(类似于Robinhood).有人知道怎么做吗？

推荐答案

创建一个useState挂钩来存储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>