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

我对

formatter

组件使用

<LabelList>

属性而不是

content

属性。

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

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

Answer 2

是的，当您只想影响原始标签文本时，使用格式化程序是正确的。如果您想为标签本身提供完整的标记，并且可以完全自由地做您喜欢做的事情，则应该使用 content 属性/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} />}
/>

Answer 3

您必须在 jsx 中使用 svg 元素。 这是更新后的代码：

const renderLabel = (props: any) => {
    return <text>props.value</text>;
};