如何自定义反应“图表”中的工具提示数据？

问题描述

在 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

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

解决方法

该问题与 recharts 无关，而是与 moment.js 相关。

使用 moment(value) 期望值以 毫秒为单位自 Unix Epoch 以来，但在这种情况下，您传递的值代表 秒。相反，您可以使用 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')
}