logo

F2

  • 教程
  • 组件API
  • 图表示例
  • 所有产品antv logo arrow
  • 5.0.3
  • 顶层 API - F2
  • 组件 - Component
  • 画布 - Canvas
  • 时间轴 - Timeline
  • 图表 - Chart
    • 图表 - Chart
    • 几何标记 - Geometry
    • 线 - Line
    • 区间 - Interval
    • 点 - Point
    • 面积 - Area
    • K 线图 - Candlestick
    • 坐标轴 - Axis
    • 图例 - Legend
    • 提示 - tooltip
    • 标注 - Guide
    • 滚动条 - ScrollBar

图例 - Legend

上一篇
坐标轴 - Axis
下一篇
提示 - tooltip

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

F2 图例的生成是由图形语法中的图形属性决定的,我们会根据图形属性映射以及数据的类型自动生成不同类型的图例:color, size 这两个图形属性如果判断接收的参数是数据源的字段时,会自动生成不同的图例:

  1. color,会赋予不同的图例项不同的颜色来区分图形,如果该字段是分类类型,则会生成离散图例

Usage

import { Canvas, Chart, Line, Legend } from '@antv/f2';
const data = [
{ genre: 'Sports', sold: 5 },
{ genre: 'Strategy', sold: 10 },
{ genre: 'Action', sold: 20 },
{ genre: 'Shooter', sold: 20 },
{ genre: 'Other', sold: 40 },
];
<Canvas context={context}>
<Chart data={data}>
<Legend position="top">
<Axis field="genre" />
<Line x="genre" y="sold" />
</Chart>
</Canvas>;

Props

position: string

可选值为:'top' | 'right' | 'bottom' | 'left', 默认为 'top'

width: number

图例显示的宽度

height: number

图例显示的高度

itemFormatter: function

格式化图例每项的文本显示

marker: string

图例标记, 可选值为: 'circle' | 'square' | 'line', 默认为 'circle'

style

定义 Legend 的布局方式

属性名类型描述
flexDirectionString支持的属性:'column', 'row'
justifyContentString支持的属性:'flex-start', 'center', 'flex-end', 'space-between', 'space-around'
alignItemsString支持的属性: 'flex-start', 'center', 'flex-end', 'stretch'
alignSelfString支持的属性: 'flex-start', 'center', 'flex-end', 'stretch'
flexWrapString支持的属性:'wrap', 'nowrap'
<Legend
style={{
justifyContent: 'flex-start',
flexDirection: 'column',
}}
/>

itemStyle

定义每个图例项的布局方式,支持的属性同上文的 style

<Legend
itemStyle={{
justifyContent: 'center',
}}
/>

nameStyle

类型为绘图属性:文本属性

图例名称样式

<Legend
nameStyle={{
fontSize: '20px',
fill: '#000',
}}
/>

valueStyle

类型为绘图属性:文本属性

图例值样式

<Legend
valueStyle={{
fontSize: '20px',
fill: '#000',
}}
/>

clickable

是否支持点击,默认为 true

onClick

item 点击的回调

<Legend
onClick={(item) => {
console.log(item); // => { field: 'genre', color: '#1890FF', name: 'Sports'}
}}
/>

方法

getOriginItems()

获取图表中原始分类数据

getMaxItemBox(legendShape)

获取 legendShape 包围盒