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

Question

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

我想要的是让我的输出阅读:

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

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

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

Answer 1

一旦格式化程序也接受 Prop ，您就可以尝试更改该对象。 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]
}

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