$ gnpm install @antv/component
import { Legend } from '@antv/component';
const legend = new Legend.Category({
container: group, // 外层生成的 g 的 group
items: [{ name: '1' }, { name: '2' }, { name: '3' }],
});
所有的组件都继承自抽象类 Component 基类,其构造函数都是统一的:
new Component(cfg);
Component 基类下有两个子类
这两个子类是便于扩展自己的组件,一般使用过程中不需要了解
组件的属性用于在初始化时在构造函数中传入:
const legend = new Legend.Category({
id: 'a',
container: group, // 外层生成的 g 的 grou
items: [],
});
也可以在后面进行获取:
legend.get('id'); // a
string
: 组件的唯一 idstring|HTMLElement|IGroup
容器,GroupComponent 中使用 G 的 Group,HtmlComponent 使用 domnumber
: 组件的偏移位置 x,这个属性不是组件的主要定位属性,而是附加的用于对组件的位置进行调整number
: 组件的偏移位置 y,这个属性不是组件的主要定位属性,而是附加的用于对组件的位置进行调整boolean
: 是否执行动画,默认 falseobject
: 动画的配置项boolean
: 是否响应事件,默认 true只读属性可以通过组件的 get 方法来获取:
legend.get('name');
组件的基类 Component 主要实现组件的生命周期和定位相关的函数,所有组件实现了 IBase, IComponent, ILocation 接口,所有的子组件除了实现 IList, ISlider 接口外没有单独的方法
const legend = new Legend.Category({
id: 'a',
container: group, // 外层生成的 g 的 grou
items: [],
});
legend.render();
legend.update({
title: {
text: 'my legend',
},
x: 100,
y: 100,
});
// 等同于 legend.update(cfg);
legend.clear();
legend.set('title', { text: 'my legend' });
legend.set('x', 100);
legend.set('y', 100);
legend.render();
BBox
的定义: /**
* 包围盒 x
* @type {number}
*/
x: number;
/**
* 包围盒 y
* @type {number}
*/
y: number;
/**
* 包围盒宽度
* @type {number}
*/
height: number;
/**
* 包围盒高度
* @type {number}
*/
width: number;
/**
* 包围盒最小 x
* @type {number}
*/
minX?: number;
/**
* 包围盒最大 x
* @type {number}
*/
maxX?: number;
/**
* 包围盒最小 y
* @type {number}
*/
minY?: number;
/**
* 包围盒最大 y
* @type {number}
*/
maxY?: number;
Legend 图例主要有两个类:
Legend.Category 实现了 IList 接口
interface LegendTitleCfg {
/**
* 标题同图例项的间距
* @type {number}
*/
spacing: number;
/**
* 文本配置项
* @type {ShapeAttrs}
*/
style: ShapeAttrs;
}
number
:图例项水平方向的间距number
:默认为 null, 此时自动计算,如果设置,则所有影响图例项的定位和排布interface LegendItemNameCfg {
/**
* 图例项 name 同后面 value 的间距
* @type {number}
*/
spacing: number;
/**
* 格式化文本函数
* @type {formatterCallback}
*/
formatter?: formatterCallback;
/**
* 文本配置项
* @type {ShapeAttrs}
*/
style: ShapeAttrs;
}
type formatterCallback = (text: string, item: ListItem, index: number) => any;
interface LegendItemValueCfg {
/**
* 是否右对齐,默认为 false,仅当设置图例项宽度时生效
* @type {boolean}
*/
alignRight: boolean;
/**
* 格式化文本函数
* @type {formatterCallback}
*/
formatter?: formatterCallback;
/**
* 图例项附加值的配置
* @type {ShapeAttrs}
*/
style: ShapeAttrs;
}
interface LegendMarkerCfg {
/**
* 图例项 marker 同后面 name 的间距
* @type {number}
*/
spacing: number;
/**
* 图例项 marker 的配置项
* @type {ShapeAttrs}
*/
style: ShapeAttrs;
}
Legend.Category 实现了 IList 接口,所有方法都支持
Legend.Continuous 实现了 ISlider 接口
number[]
: 当前选中值,默认 null,string[]
: 连续图例的颜色,interface ContinueLegendRailCfg {
/**
* rail 的类型,color, size
* @type {string}
*/
type: string;
/**
* 滑轨的宽度
* @type {number}
*/
size: number;
/**
* 滑轨的默认长度,,当限制了 maxWidth,maxHeight 时,不会使用这个属性会自动计算长度
* @type {number}
*/
defaultLength: number;
/**
* 滑轨的样式
* @type {ShapeAttrs}
*/
style: ShapeAttrs;
}
interface ContinueLegendLabelCfg {
/**
* 文本同滑轨的对齐方式,有五种类型
* - rail : 同滑轨对齐,在滑轨的两端
* - top, bottom: 图例水平布局时有效
* - left, right: 图例垂直布局时有效
* @type {string}
*/
align: string;
/**
* 文本格式化
* @type {string}
*/
formatter?: (text: string | number | null) => string;
/**
* 文本同滑轨的距离
* @type {number}
*/
spacing: number;
/**
* 文本样式
* @type {ShapeAttrs}
*/
style: ShapeAttrs;
}
Aixs 继承自 GroupComponent,继承了 Component 的所有方法,坐标轴有两种:
Axis 实现了 IList 接口,两种坐标轴的配置项和方法基本相同
例如:
active: {
labelStyle: {
fontWeight: 500,
},
tickLineStyle: {
lineWidth: 2,
},
},
unactive: {
labelStyle: {
fill: Theme.uncheckedColor,
},
},
直线坐标轴没有任何特定的配置项和自己特有的方法
圆形坐标轴,有自己特有的属性:
栅格组件不再作为 Axis 的一部分,而是独立实现,由于栅格组件没有实现任何接口,所以只有自己的配置项,有两种栅格:
string|string[]
: 栅格线之间的奇偶颜色, 可以是单值,也可以是数组的两个值所有的 Annotation 都继承自 GroupComponent,没有实现特殊的接口,但是都有各自的定位方式:
辅助线的定位方式是 'region',这反映在其配置属性上
Annotaion.Region 也是使用 'region' 的定位方式,属性:
Annotaion.Region 使用 'circle' 的定位方式,属性:
Annotation.Image 使用 'region' 的定位方式:
Annotation.Text 辅助文本的定位方式是 'point'
目前仅提供了 Html 版的 Tooltip 类 ,Tooltip.Html
<div class="${CssConst.CROSSHAIR_X}"></div>
<div class="${CssConst.CROSSHAIR_Y}"></div>
,'g2-tooltip';
'g2-tooltip-title';
'g2-tooltip-list';
'g2-tooltip-list-item';
'g2-tooltip-marker';
'g2-tooltip-value';
'g2-tooltip-name';
'g2-tooltip-crosshair-x';
'g2-tooltip-crosshair-y';
由于 Tooltip.Html 继承自 HtmlComponent 可以使用 Component 的所有方法,定位方式是 'point',所以可以使用
Crosshair (十字线)是配合 tooltip 一起使用的,由于不同坐标系下的 Crosshair 不一致,所以独立出来实现,有两个类:
前两种是 Canvas 的 Group,两种十字线共同的属性有:
Crosshair.Line 的定位方式是 region,属性有:
Crosshair.Circle 的定位方式是 circle,属性有:
Crosshair.Html 的定位方式是 region, 属性有:
<span class="g2-crosshair-text">{content}</span>
'g2-crosshair',
'g2-crosshair-line',
'g2-crosshair-text',
Componet 实现了几个接口,用于统一的交互:
interface IComponent extends IBase {
/**
* 是否是列表
*/
isList(): boolean;
/**
* 是否是 slider
*/
isSlider(): boolean;
/**
* 渲染组件
*/
render();
/**
* 更新组件
* @param {object} cfg 更新的配置项
*/
update(cfg: object);
/**
* 清空组件
*/
clear();
/**
* 组件在画布上的包围盒
* @return {BBox} 包围盒
*/
getBBox(): BBox;
/**
* 是否可以响应事件
* @param capture 是否可以响应事件
*/
setCapture(capture: boolean): void;
/**
* 显示
*/
show();
/**
* 隐藏
*/
hide();
}
interface ILocation<T extends LocationCfg = LocationCfg> {
/**
* 获取定位方式,point,points,region,circle,'none' 五种值
* @return {LocationType} 定位方式
*/
getLocationType(): LocationType;
/**
* 获取定位信息
* @return {T} 定位信息
*/
getLocation(): T;
/**
* 设置定位信息
* @param {T} cfg 定位信息
*/
setLocation(cfg: T);
/**
* 设置偏移量
* @param {number} offsetX 偏移 x
* @param {number} offsetY 偏移 y
*/
setOffset(offsetX: number, offsetY: number);
/**
* 获取偏移信息
* @return {OffsetPoint} 偏移信息
*/
getOffset(): OffsetPoint;
}
不同的 LocationCfg 属性不同,有四种位置定义:
interface LocationCfg {
[key: string]: any;
}
interface PointLocationCfg extends LocationCfg {
/**
* 位置 x
* @type {number}
*/
x?: number;
/**
* 位置 y
* @type {number}
*/
y?: number;
}
interface RegionLocationCfg extends LocationCfg {
/**
* 起始点
* @type {Point}
*/
start?: Point;
/**
* 结束点
* @type {Point}
*/
end?: Point;
}
interface PointsLocationCfg extends LocationCfg {
/**
* 定位点的集合
* @type {Point[]}
*/
points?: Point[];
}
interface CircleLocationCfg extends LocationCfg {
/**
* 圆心
* @type {Point}
*/
center?: Point;
/**
* 半径
* @type {number}
*/
radius?: number;
/**
* 起始角度
* @type {number}
*/
startAngle?: number;
/**
* 结束角度
* @type {number}
*/
endAngle?: number;
}
IList 接口用于定义分类图例和坐标轴文本的交互接口,可以实现图例项(坐标轴文本)的高亮、选中等操作
interface IList {
/**
* 获取列表项
* @return {ListItem[]} 列表项集合
*/
getItems(): ListItem[];
/**
* 设置列表项
* @param {ListItem[]} items 列表项集合
*/
setItems(items: ListItem[]);
/**
* 更新列表项
* @param {ListItem} item 列表项
* @param {object} cfg 列表项
*/
updateItem(item: ListItem, cfg: object);
/**
* 清空列表
*/
clearItems();
/**
* 设置列表项的状态
* @param {ListItem} item 列表项
* @param {string} state 状态名
* @param {boolean} value 状态值, true, false
*/
setItemState(item: ListItem, state: string, value: boolean);
/**
* 根据状态获取
* @param {state} state 状态名
* @return {ListItem[]} 列表项
*/
getItemsByState(state): ListItem[];
/**
* 是否存在指定的状态
* @param {ListItem} item 列表项
* @param {string} state 状态名
*/
hasState(item: ListItem, state: string): boolean;
/**
* 清楚所有列表项的状态
* @param {string} state 状态值
*/
clearItemsState(state: string);
}
ISlider 滑块接口,用于连续图例、时间轴等组件的滑动操作
interface ISlider {
/**
* 设置可滑动范围
* @param {number} min 最小值
* @param {number} max 最大值
*/
setRange(min: number, max: number);
/**
* 获取滑动的范围
* @return {Range} 滑动范围
*/
getRange(): Range;
/**
* 设置当前值,单值或者两个值
* @param {number | number[]} value 值
*/
setValue(value: number | number[]);
/**
* 获取当前值
* @return {number|number[]} 当前值
*/
getValue(): number | number[];
}
Copyright 2013 - present © cnpmjs.org | Home |