Rechart散点图Tooltip如何显示额外属性（如项目名称）

嘿，我完全懂你不想写复杂自定义Tooltip的心情——其实不用大动干戈，只需要利用Recharts Tooltip的内置属性就能搞定，之前你用dataKey和label的方式不对，因为这俩属性不能直接绑定数据点的动态字段，得用函数式的配置来获取单个数据点的完整信息。

方法1：用formatter自定义Tooltip显示内容 #

这个方法可以让你完全控制Tooltip里的每一行内容，包括添加fullName这类额外属性：

<ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
  <CartesianGrid />
  <XAxis type="number" dataKey="sizeMB" name="Size" unit=" MB" />
  <YAxis type="number" dataKey="directReferenceCount" name="# of References" unit=" References" />
  <Tooltip 
    cursor={{ strokeDasharray: '3 3' }}
    // formatter接收当前数据点的payload，返回自定义的显示条目数组
    formatter={(value, name, props) => {
      const { fullName, sizeMB, directReferenceCount } = props.payload;
      return [
        ['项目名称', fullName],
        ['大小', `${sizeMB} MB`],
        ['引用数', `${directReferenceCount} References`]
      ];
    }}
  />
  <Scatter name="Line Item" data={this.props.data} fill="#8884d8" />
</ScatterChart>

方法2：把fullName设为Tooltip的标题（更简洁） #

如果你只想保留默认的x/y值显示，同时添加项目名称作为Tooltip的标题，只需要给label传一个函数，动态获取当前数据点的fullName：

<ScatterChart width={400} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
  <CartesianGrid />
  <XAxis type="number" dataKey="sizeMB" name="Size" unit=" MB" />
  <YAxis type="number" dataKey="directReferenceCount" name="# of References" unit=" References" />
  <Tooltip 
    cursor={{ strokeDasharray: '3 3' }}
    // label函数接收包含payload的参数，返回要显示的标题
    label={({ payload }) => payload[0].fullName}
    // 保持默认的数值显示格式（可选）
    formatter={(value, name) => [`${name}`, value]}
  />
  <Scatter name="Line Item" data={this.props.data} fill="#8884d8" />
</ScatterChart>

为什么之前的尝试没效果？ #

你之前直接给<Tooltip>传dataKey={'fullName'}和label={'fullName'}是静态值，Recharts没法把它们和单个数据点绑定。只有当label、formatter这类属性接收函数时，才能访问到当前数据点的payload（也就是你的单个数据对象），从而拿到fullName这类额外属性。

这两种方法都不用完全自定义Tooltip组件，属于官方支持的简便配置方式，比写自定义Tooltip要省事多啦～

内容的提问来源于stack exchange，提问作者Eagle1