Recharts:LabelList内容道具不工作

Question

我正在尝试使用<LabelList>组件为我的条形图做一个自定义标签。

这是我的LabelList组件和相应的渲染内容函数：

<LabelList
dataKey='pv'
position='insideRight'
fill='#f5f5f5'
className={'chart-label'}
offset={15}
content={renderLabel}
/>

const renderLabel = function(props: LabelProps){
return `${props.value}%`;
};

我只需要在图表值的末尾添加一个%符号。但这不起作用。

Answer 1

我为<LabelList>组件使用了formatter道具，而不是content道具。

<LabelList
dataKey='pv'
position='insideRight'
fill='#f5f5f5'
className={'chart-label'}
offset={15}
formatter={renderLabel}
/>

const renderLabel = (props: any) => {
return `${props}%`;
};

Answer 2

是的，当您只想影响原始标签文本时，使用格式化程序是正确的。如果您想为标签本身提供完整的标记，并且可以完全自由地做任何您喜欢的事情，那么应该使用内容属性/api，并且可以将其设置为另一个react组件，或者设置为必须返回JSX呈现的结果的函数

这是一个例子，其他谁偶然发现这个博客，可能需要使用"内容"自由。

使用LabelList并将内容设置为返回渲染的JSX 的函数

<LabelList
content={renderLabelContent}
/>

功能：

const renderLabelContent = (props: object) => {
const { x: number, y, width, height, value } = props;

return (
<div>
{// All kinds of custom JSX/html here}
{value}
</div>
);
};

将它与另一个自制的react组件(CustomizedLabel)一起使用，可以传递属性和值；

<LabelList
content={<CustomizedLabel external={external} />}
/>