阅读 46

交互语法之组件高亮

G2 从 4.0 开始,将所有的交互行为使用全新的交互语法实现,并且不再默认内置,需要用户显式调用
chart.interaction() 接口。为了帮助大家更好地理解、使用交互语法,我们将会推出交互语法专题。

本文介绍的是最常见的通过组件高亮图形(突出当前关联图形元素,其他图形元素变暗)中的一种。我们还可以通过鼠标高亮图形、框选高亮图形,这些都会将在后续章节向大家详细介绍。

交互语法概览

G2 的交互语法,是将交互拆解成多个环节,每个环节由触发和反馈组成。只要你能将交互用自然语言的方式描述出来,就可以使用 G2 的交互语法进行组合搭建出交互行为。在这里我们再一起温习下 G2 交互语法中对于交互环节的定义,更详细的内容可以阅读可视化交互语法。

G2 将每一个交互环节拆解成以下步骤:

  • showEnable 示能:表示交互可以进行;
  • start 开始:交互开始;
  • processing 持续:交互持续;
  • end 结束:交互结束;
  • rollback 回滚:取消交互,恢复到原始状态;

下面我们就开始通过组件高亮图形的交互语法组装吧,为了帮助大家理解,每个交互行为我们都会以自然语言 + 交互语法的形式向大家阐述。交互实现过程中我们会使用 G2 内置的 Action,Action 的定义和列表参考 G2 配置交互。

图表组件高亮

目前 G2 内置的图表组件包括:坐标轴、图例、Annotation(静态图形标注)、Tooltip 以及 Slider 滑动条 。在高亮交互中,比较常见的就是图例项的高亮以及坐标轴文本的高亮,如下图所示:

high3.gif

图例高亮
high4.gif

坐标轴文本高亮

交互的语言描述

G2 的坐标轴、图例都可以进行高亮,由于两者在高亮时的交互一致,所以可以用统一的自然语言来描述:

  1. 鼠标进入列表项(图例项/坐标轴文本),列表项高亮
  2. 鼠标离开列表项(图例项/坐标轴文本),取消高亮

G2 交互语法

由于图例项和坐标轴文本项各自有独立的名称 (name) ,所以可以分别写出两者高亮的交互语法:

图例项高亮

registerInteraction('legend-highlight', {
  start: [{ 
    trigger: 'legend-item:mouseenter', 
    action: ['list-highlight:highlight'] 
  }],
  end: [{ 
   	trigger: 'legend-item:mouseleave', 
    action: ['list-highlight:reset'] 
 	}],
});
复制代码

坐标轴文本高亮

registerInteraction('axis-label-highlight', {
  start: [{ 
    trigger: 'axis-label:mouseenter', 
    action: ['list-highlight:highlight'] 
  }],
  end: [{ 
   	trigger: 'axis-label:mouseleave', 
    action: ['list-highlight:reset'] 
 	}],
});
复制代码

交互语法的说明:
我们使用了通用的一个 Action list-highlight这个 Action可以高亮所有列表类组件的选项,这个 Action 支持的方法有:

  • highlight: 高亮选项
  • reset:取消高亮的选项,与当前触发源相关
  • clear:清除
  • toggle:切换高亮或者取消高亮

这个 list-highlight 的 Action 比较抽象,我们可以基于这个 Action 扩展出两个具体的 Action:

  • legend-item-highlight 图例项高亮
  • axis-label-highlight 坐标轴文本高亮

这两个 Action 的方法同 list-highlight 完全一致,我们在下面将使用他们。

关联图形高亮

high1.gif

交互的语言描述

  1. 鼠标移动到图例项上时,图例项高亮,对应的图形高亮
  2. 鼠标离开图例项时,图例项的高亮取消,对应图形的高亮取消

G2 交互语法

registerInteraction('legend-highlight', {
  start: [{ trigger: 'legend-item:mouseenter', action: ['legend-item-highlight:highlight', 'element-highlight:highlight'] }],
  end: [{ trigger: 'legend-item:mouseleave', action: ['legend-item-highlight:reset', 'element-highlight:reset'] }],
});
复制代码

你也可以通过更改引起图形高亮的触发源,将触发对象改成坐标轴的文本,上面的语言描述仅需要把图例项改成坐标轴文本即可:

  1. 鼠标移动到坐标轴文本上时,坐标轴文本高亮,对应的图形高亮
  2. 鼠标离开坐标轴文本时,坐标轴文本的高亮取消,对应图形的高亮取消
registerInteraction('axis-label-highlight', {
  start: [{ trigger: 'axis-label:mouseenter', action: ['axis-label-highlight:highlight', 'element-highlight:highlight'] }],
  end: [{ trigger: 'axis-label:mouseleave', action: ['axis-label-highlight:reset', 'element-highlight:reset'] }],
});
复制代码

high2.gif


交互语法的说明:
这两个交互中我们在前面仅仅高亮组件的步骤中增加了 element-highlight 高亮图形的 Action,这个 Action 也有几个几乎一样方法:

  • highlight: 高亮图形
  • reset: 取消高亮
  • clear: 清除所有高亮
  • toggle:切换高亮状态

组件导致的图形高亮不仅仅可以影响单个图形,还可以对关联的图形元素进行影响。看下面的示例:

high5.gif
high6.gif

图形关联组件高亮

移动到图形上时,也可以让组件高亮,使用不同的 Action 会得到不同的结果,如果我们的目的是移动到一个图形上时,让所有的列表类组件都高亮对应的选项,语言描述和交互语法可以写成一个。

high7.gif


交互的语言描述

  1. 鼠标移动到一个图形上时,对应的所有列表类的组件(坐标轴和图例)上列表项高亮
  2. 鼠标移出一个图形时,对应的所有列表类组件的列表项取消高亮

G2 交互语法

registerInteraction('element-list-highlight', {
  start: [{ trigger: 'element:mouseenter', action: ['list-highlight:highlight', 'element-highlight:highlight'] }],
  end: [{ trigger: 'element:mouseleave', action: ['list-highlight:reset', 'element-highlight:reset'] }],
});
复制代码

更多的交互

在前面的文章 《鼠标高亮图形》 中,介绍过按照颜色高亮图形和按照 x 高亮图形,可以同组件的高亮一起配合使用。

high8.gif

我们可以调用 3 个 interaction:

chart.interaction('element-highlight-by-color');
chart.interaction('legend-highlight');
chart.interaction('element-legend-highlight');
复制代码

前面两个 interaction G2 已经内置,也在 《鼠标高亮图形》讲解过,最后一个改写一下上面的交互,仅支持图例项高亮即可:

registerInteraction('element-legend-highlight', {
  start: [{ trigger: 'element:mouseenter', action: ['legend-item-highlight:highlight', 'element-highlight:highlight'] }],
  end: [{ trigger: 'element:mouseleave', action: ['legend-item-highlight:reset', 'element-highlight:reset'] }],
});
复制代码

总结

图表的图形关联组件进行高亮仅需要考虑组件自身的高亮、图形自身的高亮和互相的影响即可,但是在实际的项目中会有很多组合方式,这边文章仅仅是介绍了高亮(highlight),读者可以将高亮扩展到 active 和 selected,交互语法的实现是完全一样的,这也是交互语法的魅力所在。


参考资料

  1. 可视化交互语法
  2. G2 内置交互反馈
  3. list-active
  4. element-highlight