如何在 React 'recharts' 中自定义工具提示数据？

Question

在 React 应用程序中（使用 Next.js），我尝试使用 recharts http://recharts.org/en-US/api/LineChart 实现图形功能。现在我正在尝试在工具提示中显示日期和价格值，价格显示正确但所有点的日期都是静态的（悬停时）

我的代码是这样的

/index.js

const formatDate = (value) => {
  return moment(value).format('HH:MM A DD MM, YYYY')
}

const weeklyData = [
 { date: formatDate(1613619000), price: '1200.00' },
 { date: formatDate(1613617200), price: '1300.83' },
 { date: formatDate(1613615400), price: '1250.23' },
 { date: formatDate(1613611800), price: '500.55' },
 { date: formatDate(1613608200), price: '1600.23' },
 { date: formatDate(1613606400), price: '1850.93' },
 { date: formatDate(1613604600), price: '1750.23' },
 { date: formatDate(1613599200), price: '650.23' },
]

<LineChart
      width={900}
      height={250}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5,
      }}
    >
      <Tooltip content={<CustomTooltip />} cursor={false} />
      <Line type="monotone" dataKey="price" stroke="#4ec6f4" label="Shruthi" />
</LineChart>

/tooltip.js

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="tooltip">
       <p className="tooltipLabel">{`$${payload[0].payload?.price}`}</p>
       <p className="tooltipDesc">{`${payload[0]?.payload?.date}`}</p>
      </div>
    )
   }

  return null
}

CustomTooltip.propTypes = {
  type: PropTypes.string,
  payload: PropTypes.array,
  label: PropTypes.string,
}

export default CustomTooltip

如何根据我的要求自定义此图表？

Answer 1

此问题与 recharts 无关，但与 moment.js 有关。

使用 moment(value) expects the value to be in milliseconds since the Unix Epoch, but in this case the value you are passing represents seconds. Instead, you can use moment.unix(value) 按预期接受秒数。

const formatDate = (value) => {
    return moment.unix(value).format('HH:MM A DD MM, YYYY')
}

或者，您仍然可以使用 moment()，但是您需要将传递的值乘以 1000，这样您就得到毫秒。

const formatDate = (value) => {
    return moment(value * 1000).format('HH:MM A DD MM, YYYY')
}

如何在 React 'recharts' 中自定义工具提示数据？

How to customise the tooltip data in react 'recharts'?

graph

momentjs

reactjs

next.js

recharts