LabelList

显示数据格式

<BarChart
  width={730}
  height={250}
  data={data}
  margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name">
    <Label value="Pages of my website" offset={0} position="insideBottom" />
  </XAxis>
  <YAxis label={{ value: 'pv of page', angle: -90, position: 'insideLeft', textAnchor: 'middle' }} />
  <Bar dataKey="pv" fill="#8884d8">
    <LabelList dataKey="name" position="insideTop" angle="45"  />
  </Bar>
  <Bar dataKey="uv" fill="#82ca9d">
    <LabelList dataKey="uv" position="top" />
  </Bar>
</BarChart>

父组件

• <Area />
• <Bar />
• <Line />
• <Scatter />
• <Pie />
• <Radar />
• <RadialBar />

Properties

• dataKey String | Number

展示 label 值对应的数据的 key。

• valueAccessor Function optional

获取label值的方法

• content ReactElement | Function optional

定制每个 label 展示的内容。如果值为 React element，会克隆这个元素来渲染每个 label 的内容。如果值为函数，会调用这个函数来生成每个 label 的内容。

格式：

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

示例：

• Customized content of LabelList

• position "top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center" optional

每个label相对于它的可视区域的位置

• offset Number

相对于"设置位置"的偏移量

默认值：5

• formatter Function optional

标注值的格式化方法，只有一个参数：标注值

• data Number optional

图表的输入数据

默认值：5

• clockWise String optional

用于极坐标系图表中判断 label 可视区域的参数

默认值：1.5

• id String optional

唯一的id，会用于生成内部的clip path id 等，建议使用SSR的时候设置这个属性。