Interactions

3 min read

Interaction is an important API in G2, and it is a way to load G2's built-in interactions or custom Interaction interactions based on the Interaction syntax form. G2 4.0 has made a big change in terms of interaction. All interaction code is intrusive and is organized through interaction syntax. The way to use the interaction is also very simple, you just need to set the name of the interaction.

In G2Plot, G2's interaction syntax is passed through, as well as some built-in interactions with specific plot bindings.

Usage

Add interactions

Usage:

// Enable the Active interaction when the mouse moves over a chart element (bar in a bar, dot in a dot, etc.)
interactions: [{ type: 'element-active' }];

// Enable multiple interactions
interactions: [{ type: 'element-active' }, { type: 'brush' }];

Config interactions

通过 cfg 可以对交互行为进行配置,详细参考 G2 | 修改交互的默认交互

// 修改 tooltip 触发事件
interactions: [
  { 
    type: 'tooltip',
    cfg: { start: [{ trigger: 'element:click', action: 'tooltip:show' }] } 
  }
]

Remove the interaction

// 方式1: 关闭 tooltip 交互
interactions: [{ type: 'tooltip', enable: false }]

// 方式2:
plot.chart.removeInteraction('interaction-type');

Example:

// Removes legend filtering interaction
plot.chart.removeInteraction('legend-filter');

About interactions

Built-in interactions

更多内置交互列表,见G2 | 交互

Interaction namePreivewComments
element-active image
element-selected image可以同时选中多个 element
element-single-selected  image
element-highlight image
element-highlight-by-color image
element-highlight-by-x image相同横轴字段进行同时高亮。对于柱状图(column) ,横轴字段是 xField,对于条形图(bar) ,横轴字段是 yField。
legend-highlightimage图例项高亮,对应的图表元素也高亮
axis-label-highlightimage

Built-in Action

more details about action, got to see G2 | interaction feedback

Action baneDescriptionApply to
element-link-by-color用于连接相同颜色的图表元素,一般用于层叠柱状图 Element
element-highlight用于设置和取消图表元素的 highlight,支持多个元素一起 highlight  Element
element-single-highlight用于设置和取消图表元素的 highlight ,只允许单个元素 highlight。高亮的时候会取消当前激活元素之外的元素的高亮态 Element
element-filter图表元素的过滤,支持来自图例(分类和连续)、坐标轴文本的触发 Element

Assembel interactions

association

使用方式:

G2.registerInteraction('element-link', {
  start: [
    {trigger: 'interval:mouseenter', action: 'element-link-by-color:link'}
  ],
  end: [
    {trigger: 'interval:mouseleave', action: 'element-link-by-color:unlink'}
  ]
});

// options
{
  // interactions: [{ type: 'element-link' }],
  // 搭配高亮
  interactions: [{ type: 'element-link' }, { type: 'element-highlight-by-color' }],
}

Pointer cursor

Example:

G2.registerInteraction('hover-cursor', {
  showEnable: [
    { trigger: 'element:mouseenter', action: 'cursor:pointer' },
    { trigger: 'element:mouseleave', action: 'cursor:default' },
  ],
});

// options
{
  // 搭配 元素高亮
  interactions: [{ type: 'element-highlight' }, { type: 'hover-cursor' }],
}

More

more usages about interactions, go to see G2 | interactions