Interaction 交互

图表交互组件

内置交互

• tooltip：鼠标在 chart 上移动时显示提示信息
• legend-active：鼠标移动到图例选项时，图例项高亮，对应的图形高亮
• legend-filter：分类图例的勾选
• continuous-filter: 连续图例的过滤

可以通过 Chart 上的配置项 defaultInteractions 更改内置的交互

<Chart
  scale={scale}
  height={500}
  data={source}
  autoFit
  defaultInteractions={['tooltip']} // 仅保留 tooltip
>
</Chart>

配置交互的两种方法

• 在Chart组件上添加交互属性
• 使用Interaction组件添加交互

<Interaction type="active-region"/>

API配置

---

type

可选 string default：

交互名称，所有的交互名称列表如下表。

交互名称	说明	效果
active-region	鼠标在画布上移动时对应位置的分类出现背景框
view-zoom	鼠标滚动时，图表内部缩放
element-active	鼠标移入图表元素（柱状图的柱子、点图的点等）时触发 active
element-selected	点击选中图表元素、再次点击取消，允许多选
element-single-selected	单选图表元素，下次点击允许取消
element-highlight	图表元素的高亮，是一部分图表元素高亮，另一部分变暗
element-highlight-by-x	高亮 x 值相同的 element，适用于分组的场景
element-highlight-by-color	高亮所有同颜色的 element，适用于层叠的场景
legend-filter	分类图例的数据过滤
legend-visible-filter	分类图例的图形过滤，点击图例对应的图形隐藏/显示，这个交互不会引起坐标轴的变化 (注意：由于内置了 legend-filter 交互，所以使用该交互时移除掉 legend-filter 交互)
continuous-filter	连续图例的数据过滤，数据过滤会导致坐标轴的变化
continuous-visible-filter	仅仅过滤图形，而不引起坐标轴的变化 (注意：由于内置了 continuous-filter 交互，所以使用该交互时移除掉 continuous-filter 交互 )
legend-active	图例项 active，对应的图表元素也 active
legend-highlight	图例项高亮，对应的图表元素也高亮
axis-label-highlight	坐标轴文本高亮，对应的图表元素也高亮

config

可选 object default：

交互配置项，用于修改交互动作。

<Interaction
    type="tooltip"
    config={{ // 修改了原有的tooltip交互，改为点击时展示。
      start: [{ trigger: 'plot:click', action: 'tooltip:show' }],
    }}
  />

在交互语法中一个交互可以由多个交互环节组成，每个交互环节可以有多个触发和反馈，所以在配置交互时可以配置每个环节，每个环节都是数组，都有 trigger 和 action

交互环节：

• showEnable：标识交互可以发生
• start: 交互开始
• processing: 交互持续
• end: 交互结束
• rollback: 回滚