API - 通用组件 - Legend - 《Recharts 开发者手册》

Legend
- 父组件
- Properties

Legend

注意，现在图例是使用 HTML 实现的。对于类目图表（LineChart, BarChart, AreaChart, ComposedChart, ScatterChart）以及 RadarChart 我们会根据组件的属性 "name" 来生成图例的内容，如果组件没有指定 "name" 属性，我们会根据组件的属性 "dataKey" 来生成图例的内容。对于极坐标图表 (PieChart, RadialBarChart) 我们会根据每个子组件的 "name" 属性值生成图例的内容。

pv of pages
uv of pages

显示数据格式

<LineChart width={730} height={250} data={data}
  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend verticalAlign="top" height={36}/>
  <Line name="pv of pages" type="monotone" dataKey="pv" stroke="#8884d8" />
  <Line name="uv of pages" type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>

父组件

Properties

width Number optional

图例的宽度。

height Number optional

图例的高度。

layout 'horizontal', 'vertical'

图例的布局类型：横向布局、纵向布局。

默认值：'horizontal'

align 'left', 'center', 'right'

水平方向的对齐方式。

默认值：'center'

verticalAlign 'top', 'middle', 'bottom'

垂直方向的对齐方式。

默认值：'middle'

iconSize Number

图例中图标的大小。

默认值：14

iconType 'line' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'

图例中图标的类型。

payload Array

图例的源数据，通常内部计算，如果用户指定了这个值，会覆盖内部计算的值。

默认值：[]

格式：

[{ value: 'item name', type: 'line', id: 'ID01' }]

chartWidth Number

图表的宽度，通常父组件会传下来。

chartHeight Number

图表的高度，通常父组件会传下来。

margin Object optional

父组件的 marign 值。

格式：

{ top: 0, left: 0, right: 0, bottom: 0 }

content ReactElement | Function optional

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

格式：

<Legend content={<CustomizedLegend external={external} />} />
const renderLegend = (props)  => {
  const { payload } = props;
  return (
    <ul>
      {
        payload.map((entry, index)  => (
          <li key={`item-${index}`}>{entry.value}</li>
        ) ) 
      }
    </ul>
  ) ;
}
<Legend content={renderLegend} />