非常快速的解决方案。您可以根据需要更改它
创建自定义工具提示类
export const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<div>
{payload.map((pld) => (
<div style={{ display: "inline-block", padding: 10 }}>
<div style={{ color: pld.fill }}>{pld.value}</div>
<div>{pld.dataKey}</div>
</div>
))}
</div>
</div>
);
}
return null;
};
然后像这样使用它
<Tooltip content={<CustomTooltip />} cursor={{ fill: "transparent" }} />
这是 @Apostolos 答案的 ts 版本:
import { TooltipProps } from 'recharts';
import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<div>
{payload.map((pld) => (
<div style={{ display: "inline-block", padding: 10 }}>
<div style={{ color: pld.color }}>{pld.value}</div>
<div style={{ color: "gray" }}>{pld.dataKey} drivers</div>
</div>
))}
</div>
</div>
);
}
return null;
};