交互
交互语法
交互使用
registerInteraction(name: string, cfg: InteractionSteps | InteractionConstructor): 注册交互chart.interaction(name: string, cfg?: InteractionSteps): 使用交互,或配置交互chart.removeInteraction(name: string): 移除交互
交互配置
一个交互可由多个交互环节组成,每个交互环节可有多个触发和反馈
ts
// 交互过程,包含多个交互环节: 示能、开始、持续、结束、回滚
interface InteractionSteps {
showEnable?: InteractionStep[]; // 示能(显示交互可以进行)
start?: InteractionStep[]; // 开始
processing?: InteractionStep[]; // 持续
end?: InteractionStep[]; // 结束
rollback?: InteractionStep[]; // 回滚
}
// 交互环节,包含 触发 和 反馈 等
interface InteractionStep {
/**
* 触发事件,支持 view,chart 的各种事件,也支持 document、window 的事件
* 格式: [对象]:[事件],如 `mask:mouseenter`
*/
trigger: string;
/**
* 反馈,包括反馈对象与结果,可以配置多个或回调函数
* 格式:[反馈对象]:[响应方法],如 `mask:hide`
*/
action: string | string[] | ActionCallback;
isEnable?: (context: IInteractionContext) => boolean; // 是否可以触发 action
arg?: any | any[]; // 具体 action method 的参数,多个 action 时,args 必须是一个数组
callback?: (context: IInteractionContext) => void; // 回调函数,action 执行后执行
actionObject?: ActionObject | ActionObject[]; // 内部属性,不需要用户传入,通过上面的属性计算出来的属性
once?: boolean; // 在一个环节内是否只允许执行一次
throttle?: ThrottleOption; // 是否增加节流
debounce?: DebounceOption; // 是否延迟
}ts
// 上下文信息:包括当前进行交互及交互步骤信息、当前对象、容器的状态
interface IInteractionContext extends LooseObject {
event: LooseObject; // 事件对象
view: View; // 当前的 view
actions: IAction[]; // 交互相关的 Actions
cache(key: string, value?: any): any; // 缓存属性,用于上下文传递信息
getAction(name: any): IAction; // 获取 action
getCurrentPoint(): Point; // 获取当前的点
getCurrentShape(): IShape; // 获取当前的图形
addAction(action: IAction): any; // 添加 action
removeAction(action: IAction): any; // 移除 action
isInPlot(): any; // 事件触发时是否在 view 内部
isInComponent(name?: string): any; // 是否在组件的包围盒内
isInShape(name: any): any; // 是否在指定的图形内
destroy(): any; // 销毁
}规格描述
触发(Trigger):由 对象:事件 组成(如 area:click),对象有以下三种
- 容器
- 图表: chart
- 子视图: view
- 容器的状态量: selectedElements, cursorInfo 等
- 元素
- 元素名称: interval, line, point, area 等
- 元素内部图形元素名称: line-label, point-label 等
- 组件
- 组件名称: legend, axis, annotation
- 组件的组成部分: legend-item, annotation-line
反馈(Action)
- 对象:Action 对 Trigger 进行相应,反馈的对象必须与触发关联
- 可以是之前触发的对象
- 可以是位置信息计算出的对象
- 可以是触发对象关联的其他对象
- 结果: 在回调函数中指定或事先定义后在交互语法中使用 Action 名称
上下文(Context): 在 Trigger 和 Action 之间需要上下文,包括
- view、chart 上的全局状态量
- size
- cursorPoint
- currentShape, currentElement, currentComponent, currentView 等根据鼠标位置推导出的信息
- activeElements, selectedElements, xxxStateElements 等跟状态量相关的 Element
- 自定义的状态量
- 交互过程中各个环节需要共享的信息
- 当前交互的 ID
- 当前交互执行到的环节
- 执行完毕的环节传递给后续环节的信息
内置交互
| 名称 | 描述 | 其他 |
|---|---|---|
| tooltip | 鼠标移动时展示 提示信息 | |
| active-region | 鼠标在画布上移动时对应位置的分类出现背景框 | |
| view-zoom | 鼠标滚动时,图表内部缩放,需要配置 throttle | |
| element-active | 鼠标移入图表元素时触发 active | |
| element-selected | 点击选中图表元素、再次点击取消,允许多选 | |
| element-single-selected | 单选图表元素,下次点击允许取消 | |
| element-highlight | 图表元素高亮 | |
| element-highlight-by-x | 图表高亮 x 值相同的元素,用于分组场景 | |
| element-highlight-by-color | 高亮颜色相同的元素,用于层叠场景 | |
| legend-active | 鼠标移动到分类图例时,图例及对应图形状态 active | |
| legend-highlight | 鼠标移动到分类图例时,图例及对应图形高亮 | |
| legend-filter | 分类图例过滤,对应图形隐藏/显示,重新计算坐标 | |
| legend-visible-filter | 分类图表过滤,对应图形隐藏/显示,不引起坐标变化 | 需要先移除 legend-filter |
| continuous-filter | 连续图例过滤 | |
| contiuous-visible-filter | 连续图例过滤,不引起坐标轴变化 | 需要先移除 continuous-filter |
| axis-label-highlight | 坐标轴文本高亮,对应图表元素高亮 | |
| element-list-highlight | 鼠标触发图表元素高亮,对应列表组件高亮 | |
| brush | 框选过滤图形 | |
| brush-x | 框选过滤,仅过滤 x 轴相关数据 | |
| brush-y | 框选过滤,仅过滤 y 轴相关数据 | |
| brush-visible | 框选仅过滤图形不过滤数据 |