Recharts：如何对工具提示中的元素进行排序？

Question

我将Recharts与NextJS一起使用。我有一个像这样的线条ComposedChart和堆叠条形：

堆叠条形图从下到上呈现，因此工具提示的顺序也按照图表状态的升序呈现：

我们如何改变它的顺序，<Tooltip />以便它从栏的顶部到底部渲染？（例如：黄色 -> 灰色 -> 青色 -> 淡青色）

数据对象的结构（每个数据对象都匹配一个堆积条）：

[
 {
  aggregated_month: "2021/08"
  deep_sleep_uu: 192 // This one is Gray
  latest_recovery_uu: 159 // Cyan
  recovery_rate: 63.6 // Yellow line
  recovery_uu: 176 // Pastel Cyan
  total_uu: 527 // Number on top
 },
 {
  aggregated_month: "2022/04"
  latest_recovery_uu: 288 // Cyan
  recovery_rate: 76.1 // Yellow
  recovery_uu: 127 // Pastel Cyan
  sleep_uu: 130 // Red bar
  total_uu: 545 // Number on top
 }
]

我尝试过的：

1. <Tooltip itemSorter={() => -1} />- 这是默认值
2. <Tooltip itemSorter={() => 1} />- 这也行不通

Answer 1

itemSorter有这个签名 -> itemSorter?: (item: Payload<TValue, TName>) => number | string（代码在这里），其中payload是以下对象：

\n

export interface Payload<TValue extends ValueType, TName extends NameType> {\n  type?: TooltipType;\n  color?: string;\n  formatter?: Formatter<TValue, TName>;\n  name?: TName;\n  value?: TValue;\n  unit?: ReactNode;\n  dataKey?: string | number;\n  payload?: any;\n  chartType?: string;\n}\n

\n

* 可以检查payload对象* 您可以在此处

\n

这意味着您可以按有效负载中的任何属性对工具提示进行排序。

\n

一些排序示例：

\n

按名称分类

\n

<Tooltip\n   itemSorter={(item) => {\n      return item.name as string;\n   }}\n/>\n

\n

按值排序 (ASC)

\n

<Tooltip\n   itemSorter={(item) => {\n      return item.value as number;\n   }}\n/>\n

\n

按值排序 (DESC)

\n

<Tooltip\n   itemSorter={(item) => {\n      return (item.value as number) * -1;\n   }}\n/>\n

\n

自定义排序

\n

<Tooltip\n        itemSorter={(item) => {\n          switch (item.dataKey) {\n            case "recovery_rate":\n              return 0;\n            case "deep_sleep_uu":\n              return 1;\n            case "latest_recovery_uu":\n              return 2;\n            default:\n              return 3;\n          }\n        }}\n      />\n

\n

说的是，由于我不知道你的整个代码，我相信你想要的可以完成按名称排序。

\n