2

我绘制了多个折线图并启用了工具提示。当我这样做时,它给了我最后一个情节的价值。如何Crosshair同时获取多行系列的值。

以下是参考代码:

const [tooltip, setTooltip] = useState([])
return (
  <XYPlot
    xType='time'
    height={500}
    width={2000}
    margin={{ left: 80, right: 200, bottom: 100, top: 20 }}
    onMouseLeave={() => setTooltip([])}
  >
    <VerticalGridLines />
    <HorizontalGridLines />
    {series.map((entry, idx) => {
      const id = `${entry.title}`
      return (
        <LineSeries
          key={id}
          strokeWidth={1}
          data={entry.data}
          onNearestX={(d) => setTooltip([ d ])}
        />
      )
    })}
    <Crosshair values={tooltip} />
    <XAxis
      tickFormat={(d) => d.toLocaleDateString('default', { month: 'short' })}
      tickValues={selectedDates}
    />
    <YAxis />
  </XYPlot>
)
4

0 回答 0