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

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

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

Answer 2

您可以创建自定义工具提示组件，该组件可以根据您的要求显示数据，如下所示

  const CustomTooltip = ({ active, payload, label }) => {
    console.log("payload",payload);  //you check payload
    if (active) {
      return (
        <div>
         <Card>
          <p>{date} </p>
          <p>Price : ${}</p>
          <p>Sales Rank :${} </p>
          <Card>
        </div>
      );
    }

    return null;
  };

有效载荷数组图像 有效载荷变量包含根据您的要求的所有轴值和数据，例如

其中有效载荷 [0] 包含 x 轴，有效载荷1包含 y 轴，有效载荷 [2] 根据您的要求包含 z 轴，您可以从数组中提取值

       <div>
          <p>{date} </p>
          <p>Price : ${payload[0].data}</p>
          <p>Sales Rank :${payload[1].data} </p>
        </div>

和日期我们可以从payload[0].payload中提取，其中包含您在图表中传递的数据的整个对象，您可以在Tooltip中传递您的CustomTooltip，如下所示

<Tooltip content={<CustomTooltip />} />

每当您将光标悬停在图表上的点上时，都可以根据需要查看工具提示

Answer 3

如果要特别格式化标签，可以使用labelFormatter代替formatter：

<Tooltip
  labelFormatter={value => {
    return `label: ${value}`;
  }} 
/>