Legend - 图例

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

类型	展示形态	备注	优先级	进度
连续图例		连续色板	高
		渐变色板	中
		带刻度线的渐变色板	低
		颜色 + 尺寸	中
		布局	高
分类图例		颜色	高
		形状	高
		尺寸	中
		布局	高

其他元素：

元素	展示形态	备注	优先级
滑块手柄		渐变色板状态下滑块步长为一格宽度 可自定义手柄	高
分页器		自定义按钮 翻页方式 - 横向 - 纵向 - 横向滚动 - 纵向滚动	中
分类图例项		marker + name + value 文本超长时缩略： - name - value	中
		对齐方式 - 纵向 - 横向流式	高

交互：

事件	对象	展示形态	优先级
Hover	连续色板		中
	渐进色版		中
	图例		中
	图例文本	显示缩略文本完整信息
拖拽	手柄		高
点击	图例	未选择 选择	高

其它：图表交互（内网访问）

使用

import { ContinuousLegend, CategoryLegend } from '@antv/GUI';

图例容器大小待定

LegendBaseCfg

• padding: number | number[]
• backgroundStyle: MixAttrs
• orient: "vertical" | "horizontal""horizontal" 布局方式
• title:
  • content: string
  • spacing: number 标题到图例的距离
  • align: ‘left’ | ‘center’ | ‘right’ 标题位置
  • style: ShapeAttrs
  • formatter:(text: string) => string | Group
• type: ‘category’ | ‘ continuous’ 类型

连续图例 ContinuousLegendCfg

LegendBaseCfg

• min: number 最小值
• max: number 最大值
• start: number 选区范围起始值 ⚠️ 在分块连续图例情况下，start与end需在{min、max、ticks}中取值
• end: number 选区范围结束值
• color: string | string[] 颜色
• label: false | 连续图例标签
  • style: ShapeAttrs
  • spacing: number 标签与图例间隔
  • formatter: (value: number, idx: number) => string
  • align：’rail’ | ‘inside’ | ‘outside’’rail’ 为rail时仅显示min和max的label，非rail时需要指定rail.ticks
• rail: 色板配置
  • width: number
  • height: number
  • type: ‘color’ ｜ ‘size’’color’
  • chunked: booleanfalse 分块连续图例
  • ticks: number[] 分块连续图例分隔点、连续图例Label标记处
  • isGradient: boolean | ‘auto’’auto’ 是否使用渐变色 默认items与colors数量相等时不使用渐变色
  • backgroundColor: string
• slidable: booleantrue 选区是否可滑动
• step: number1% 滑动步长
• handle: false | 手柄配置
  • size: number
  • text:
    • formatter: (value: number) => string
    • style: ShapeAttrs
    • align: ‘rail’ | ‘inside’ | ‘outside’
  • spacing: number10 文本到手柄的距离，text align为’inside’或’outside’时生效
  • icon:
    • marker: MarkerOptions[‘symbol’] | stringdefault
    • style: ShapeAttrs
• indicator: false | 指示器配置
  • size: number4小箭头大小
  • backgroundStyle: ShapeAttrs 背景样式
  • spacing: number10 文本到色板的距离
  • padding: number | number[]4 文字内边距
  • text:
    • formatter: (value: number) => string
    • style: TextProps

分类图例 CategoryLegendCfg

• LegendBaseCfg
• items: CategoryItem[]
• maxWidth: number 最大宽高
• maxHeight: number
• maxCols: number 最大行列数
• maxRows: number
• itemWidth: number 图例项宽度（等分形式）
• maxItemWidth: number 图例项最大宽度（跟随形式）
• spacing: [number, number]10 图例项之间的间隔(行距、列距)
• itemMarker: ItemMarkerCfg | (item: CategoryItem, index: number, items: CategoryItem[]) = > ItemMarkerCfg
• itemName: ItemNameCfg | (item: CategoryItem, index: number, items: CategoryItem[]) = > ItemNameCfg
• itemValue: ItemValueCfg | (item: CategoryItem, index: number, items: CategoryItem[]) = > ItemValueCfg
• itemBackgroundStyle: MixAttrs | (item: CategoryItem, index: number, items: CategoryItem[]) = > MixAttrs
• autoWrap: boolean 自动换行、列
• reverse: boolean 图例项倒序
• pageNavigator: PageNavigatorCfg 分页器

分页 PageNavigatorCfg

• button:
  • marker:MarkerCfg | (type: ‘prev’ | ‘next’) => MarkerCfg 类型定义待确定
  • size: number12
  • style: MixAttrs
• pagination: 页码
  • style: ShapeAttrs
  • divider: string/ 页码分隔符
  • formatter: (pageNum: number) => number | string

ItemMarkerCfg

• markermarkerType
• spacing: number10 marker 与 前部的距离
• size: number10 marker 尺寸

• style: MixAttrs

  ItemNameCfg

• formatter: (text: string, item: CategoryItem, index: number) => string;

• spacing: number10 marker 与 name 的间隔
• style: MixAttrs

ItemValueCfg

• formatter: (value: number, item: CategoryItem, index: number) => string;
• spacing: number10 name 与 value 的间隔
• align: ‘left’ | ‘right’
• style: MixAttrs

交互

连续图例

• 整体拖拽
  • 鼠标或者手指拖拽选框以调整色板位置

• 拖拽手柄以设置色板范围

  分类图例

• 选择、取消选择图例项

• 翻页、滚动
• hover
  • 图例项

API

setIndicator(value: number | item: ListItem | undefined)设置/取消指示器

事件

onValueChanged(value: number[]| ListItem[])：图例值改变时触发（连续图例为范围改变，分类图例为选项改变）
hover、click事件由上层控制
onIndicated(value: number | [number, number]): 指示器hover时触发