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

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