时间戳

首页 > 解决方案 > Recharts - 双轴折线图上的工具提示格式化程序？

reactjs - Recharts - 双轴折线图上的工具提示格式化程序？

问题描述

我正在使用双轴折线图，并且试图弄清楚如何使用格式化程序功能格式化工具提示的内容。

我想要的是让我的输出读取：

2019-01-13
Price: $17.99
Sales Rank: 326,518

我目前正在使用以下代码将价格格式化为价格，但它不会改变销售排名值。我也不确定如何更改标签？

<Tooltip formatter={(value, name) => (name === "price") ? `$${value/100}` : value.toLocaleString()}/>

在此处输入图像描述

标签： reactjsrecharts

解决方案

只要格式化程序也接受道具，您就可以尝试更改该对象。Props 将所有数据显示在工具提示中。

const formatter = (value, name, props) => {
    console.log("V", value, "N", name, "P", props); // for debug
    props.payload = Object.keys(props.payload).map(k => {
        return props.payload[k] = isNaN(props.payload[k]) ? props.payload[k] : format(props.payload[k]);
    })
    return [value, name, props]
}

虽然我不确定这是一个好的解决方案，因为对我来说它有时会在调整大小时打破图表。但也许你可以让它工作。

推荐阅读