API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

Legend

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

父组件

Properties

  • widthNumberoptional

    图例的宽度。

  • heightNumberoptional

    图例的高度。

  • layout'horizontal', 'vertical'

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

    默认值：'horizontal'

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

    水平方向的对齐方式。

    默认值：'center'

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

    垂直方向的对齐方式。

    默认值：'bottom'

  • iconSizeNumber

    图例中图标的大小。

    默认值：14

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

    图例中图标的类型。

  • contentReactElement | Functionoptional

    定制图例展示的内容。如果值为 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} />

  • formatterFunctionoptional

    每个项目中“文本”的格式化函数。

    格式：

    (value, entry, index) => ()

    示例：

  • wrapperStyleObjectoptional

    图例是使用 HTML 渲染的，最外层的节点是一个绝对定位的 div ，所以你可以通过 top、left 来指定图例的位置，当然也可以指定其他的样式。

    示例：

  • onClickFunctionoptional

    图例每个项目 click 事件的回调函数。

  • onMouseDownFunctionoptional

    图例每个项目 mousedown 事件的回调函数。

  • onMouseUpFunctionoptional

    图例每个项目 mouseup 事件的回调函数。

  • onMouseMoveFunctionoptional

    图例每个项目 mousemove 事件的回调函数。

  • onMouseOverFunctionoptional

    图例每个项目 mouseover 事件的回调函数。

  • onMouseOutFunctionoptional

    图例每个项目 mouseout 事件的回调函数。

  • onMouseEnterFunctionoptional

    图例每个项目 mouseenter 事件的回调函数。

    示例：

  • onMouseLeaveFunctionoptional

    图例每个项目 mouseleave 事件的回调函数。

    示例：