图表联动怎么做?G2Plot 多图层图表联手自定义交互来帮你 👏

avatar
数据可视化 @蚂蚁集团

G2Plot 最初诞生于阿里经济体 BI 产品真实场景的业务诉求,基于 G2 图形语法,一图一做扩展常见的业务图表。

随着业务的发展,我们发现普通的统计图表已经不满足我们的业务诉求,更多需要的是组合式图表,来帮助我们更好地分析业务。 那 G2Plot 多图层图表可以做些什么交互呢?除了内置的单图交互,如选中、激活、高亮等,本节主要介绍进阶的自定义交互。

一、联动交互

我们在分析顾客画像的时候,可以使用多图层图表联动交互来分析不同职业岗位在成功支付以及未购买成功但具备购买潜力的客单数上的占比对比分析。 饼图联动交互.gif

实现原理: G2Plot 继承 G2 的交互语法。在 G2 交互语法中, 可以把交互定义为:触发(trigger)、反馈(action)、上下文(context) 组成。上下文主要用来连接 Trigger 和 Action 之间的信息,存放一些状态量。比如第一个饼图鼠标移入的时候,我们可以获取当前激活图形元素携带的数据,从而推导需要联动激活的相邻子 view 的图形元素。

多图层图表内置了自定义的联动交互,提供了以下四种反馈进行联动交互:

1、 tooltip 联动 (showTooltip、hideTooltip)

2、激活 (active、reset)

3、高亮 (highlight、reset)

4、选中 (selected、reset)

默认根据一个分类 scale 的维值进行联动,也可以在使用交互的时候传入 'dim', 'linkField'  参数指定联动的位置通道以及字段:1、如果 dim 参数存在,根据 dim 获取相应的 field,判断是否和 linkField 匹配 2、若 dim 参数不存在,且 linkField 存在,则作为关联字段

二、联动筛选

使用饼图来作为我们的筛选图例,是不是别有一番,快来尝试一下把~ 联动筛选.gif

实现原理: 注册一个自定义的联动交互,监听 element 图形元素点击事件,对图层数据进行筛选过滤,重新渲染

下面对这段源码解读一下:

1、示能阶段(showEnable):监听 element 鼠标移入移出事件,执行鼠标反馈,内置了多种鼠标 action

2、开始阶段(start): 监听 element 点击事件,使用回调函数的方式执行反馈。在这里反馈中,我们获取到当前图层 view 的相邻图层(也就是折线图所在 view),执行 fitler 筛选数据,调用 render(true) 执行刷新重绘

3、结束阶段(end): 监听 element 双击事件,在回调反馈中,同样获取折线图所在 view,filter 筛选还原数据,执行重绘。

G2.registerInteraction('custom-association-filter', {
  showEnable: [
    // 鼠标形状变成手势
    { trigger: 'element:mouseenter', action: 'cursor:pointer' },
    { trigger: 'element:mouseleave', action: 'cursor:default' },
  ],
  start: [
    {
      trigger: 'element:click',
      action: (context) => {
        const { view, event } = context;
        const view1 = view.parent.views[1];
        view1.filter('area', (d) => d === event.data?.data.area);
        view1.render(true);
      },
    },
  ],
  end: [
    {
      trigger: 'element:dblclick',
      action: (context) => {
        const { view } = context;
        // 获取第二个 view
        const view1 = view.parent.views[1];
        view1.filter('area', null);
        view1.render(true);
      },
    },
  ],
});

更多资料