Skip to content
大纲

交互

交互语法

交互使用

  • 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框选仅过滤图形不过滤数据