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

Question

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

我想要的是输出内容：

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

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

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

Answer 1

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

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;
  };

payload array image 负载变量包含所有轴值和数据，例如根据您的要求

根据您的要求，payload[0] 包含 x 轴，payload1 包含 y 轴，payload[2] 包含 z 轴，您可以从数组中提取值

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

我们可以从包含您在图表中传递的数据的整个对象的有效负载[0].payload 中提取日期和日期，您可以在工具提示中传递您的自定义工具提示，如下所示

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

只要您将光标悬停在图形上的点上，就可以随心所欲地看到工具提示