legend.md

图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。 component 提供了分类图例和连续图例。

引入

import { Category, Continuous } from '@antv/component';

配置项

基本配置

属性名	类型	描述	默认值
width	number	图例宽度	-
height	number	图例高度	-
orientaion	horizontal|vertical	图例朝向，对于分类图例来说即滚动方向	horizontal
padding	number|number[]	图例内边距	10
showTitle	boolean	是否显示图例标题	true
title{Style}	TextStyleProps	图例标题样式，见 TextStyleProps	-

分类图例

属性名	类型	描述	默认值
data	CategoryItemsDatum[]	图例项数据	[]
layout	flex | grid	图例项布局方式	flex
gridRow	number	每行显示的图例项个数，默认即单行布局	Infinity
gridCol	number	每列显示的图例项个数	-
rowPadding	number	图例项之间的行间距	0
colPadding	number	图例项之间的列间距	0
focus	boolean	是否开启聚焦	-
focusMarkerSize	number	聚焦图标尺寸	12
click	ClickEvent	点击事件	-
mouseenter	MouseEnterEvent	鼠标移入事件	-
mouseleave	MouseLeaveEvent	鼠标移出事件	-
nav{Style}	NavigatorStyleProps	分页器配置，见 NavigatorStyleProps	-

type CategoryItemsDatum = {
  [keys: string]: any;
};

连续图例

属性名	类型	描述	默认值
data	ContinuousDatum[]	数据	[]
defaultValue	[number, number]	默认选取范围	[0,1]
showHandle	boolean	是否显示滑动手柄	true
showTick	boolean	是否显示刻度	true
showLabel	boolean	是否显示刻度值	true
slidable	boolean	是否可滑动	true
step	number	滑动步长	-

type ContinuousDatum = {
  value: number;
  [keys: string]: any;
};

滑动手柄

属性名	类型	描述	默认值
showHandleLabel	boolean	是否显示滑动手柄文本	true
handleFormatter	(value: ContinuousDatum)=>string	滑动手柄文本格式化	-
handleSpacing	number	滑动手柄与手柄文本的间距	0
handleMarkerSize	number	滑动手柄的大小	25
handleMarkerSymbol	Symbol	滑动手柄的图形	-
handleMarker{Style}	StyleProps	滑动手柄样式，见 DisplayObjectStyleProps	-
handleLabel{Style}	TextStyleProps	滑动手柄文本样式，见 TextStyleProps	-

指示器

属性名	类型	描述	默认值
indicatorFormatter	(value: ContinuousDatum)=>string|DisplayObject	指示器文本格式化	-
indicatorIndicate	(value: ContinuousDatum)=>void	指示器触发事件	-
indicatorPadding	number|number[]	指示器内边距	10
indicator{Style}	StyleProps	指示器样式	-

刻度

属性名	类型	描述	默认值
labelAlign	value|range	刻度值对其位置(值、范围)	value
labelDirection	positive | negative	刻度值的朝向	positive
labelSpacing	number	刻度值与图例的间距	0
labelFilter	(datum:ContinuousDatum, index:number, data:ContinuousDatum[])=>boolean	刻度值过滤	-
labelFormatter	(datum:ContinuousDatum, index:number, data:ContinuousDatum[])=>DisplayObject	刻度值格式化	-

色带

属性名	类型	描述	默认值
ribbonType	size | color	色带类型	color
ribbonBlock	boolean	是否分块	false
ribbonColor	string|string[]	色带颜色	[]
selection{Style}	StyleProps	选中区域样式，见 DisplayObjectStyleProps	-
track{Style}	StyleProps	轨道样式，见 DisplayObjectStyleProps	-