如何在“重新图表”中自定义工具提示数据？
如何在“重新图表”中自定义工具提示数据？
提问于 2021-02-23 05:11:35
在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如何根据我的需求定制这个图表？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-23 12:08:41
这个问题与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')
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66327395
复制相关文章
相似问题
腾讯云开发者
