阅读 162

如何使用 G2 4.0 快速个性化饼图?

饼图(Pie Chart)作为最常见的统计图表之一,用于可视化数据中不同分类的占比情况。使用 G2,在不进行任何定制的情况下,用户可以得到如下饼图:除去基本的图形元素外,还提供了 label 文本标注以及图例的绘制能力。同时还提供了 tooltip 提示信息、图例筛选等交互行为。

image.png
2020-03-16 13-29-43.2020-03-16 13_31_59.gif

但是通常,用户更倾向于以下饼图的设计及交互:

image.png
2020-03-16 13-41-04.2020-03-16 13_41_28.gif

在定制之前,我们可以看看这两种饼图可视化方式的区别在哪里:
绘制层

  1. 使用空心环代替实心扇形;
  2. 图例的个性化定制,将原本 label 的内容同图例内容合并。

交互层

  1. 图形元素响应鼠标的状态发生改变:从默认的描边变为图形的放大突出;
  2. 图例的点击筛选变为点击突出图形元素

下面就让我们来看下,如何基于默认的饼图代码,一步一步快速、简单得定制吧!

默认饼图代码:

import { Chart } from '@antv/g2';

const data = [
  { item: '事例一', count: 40, percent: 0.4 },
  { item: '事例二', count: 21, percent: 0.21 },
  { item: '事例三', count: 17, percent: 0.17 },
  { item: '事例四', count: 13, percent: 0.13 },
  { item: '事例五', count: 9, percent: 0.09 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.coordinate('theta', {
  radius: 0.75,
});

chart.data(data);

chart.scale('percent', {
  formatter: (val) => {
    val = val * 100 + '%';
    return val;
  },
});

chart.tooltip({
  showTitle: false,
  showMarkers: false,
});

chart
  .interval()
  .position('percent')
  .color('item')
  .label('percent', {
    content: (data) => {
      return `${data.item}: ${data.percent * 100}%`;
    },
  })
  .adjust('stack');

chart.interaction('element-active');

chart.render();
复制代码

线上示例链接:g2.antv.vision/zh/examples…

定制坐标系

扇形变圆环,只需一步!

image.png

定制图例

我们可以使用 G2 的自定义图例来实现预期的图例样式,在 G2 4.0 的图例中,我们开放了 itemName 和 itemName 属性,用于图例内容及样式的配置。

image.png

图例属性对应关系

具体的定制代码如下:

// 声明需要进行自定义图例字段: 'item'
chart.legend('item', {
  position: 'right',                                  // 配置图例显示位置
  custom: true,                                       // 关键字段,告诉 G2,要使用自定义的图例  
  items: data.map((obj, index) => {
    return {
      name: obj.item,                                 // 对应 itemName
      value: obj.percent,                             // 对应 itemValue
      marker: {
        symbol: 'square',                             // marker 的形状
        style: {      
          r: 5,                                       // marker 图形半径
          fill: chart.getTheme().colors10[index],     // marker 颜色,使用默认颜色,同图形对应
        },
      },                                              // marker 配置
    };
  }),
  itemValue: {
    style: {
      fill: '#999',
    },                                               // 配置 itemValue 样式
    formatter: val => `${val * 100}%`                // 格式化 itemValue 内容
  },
});
复制代码

同时我们将 label() 方法移除,就得到了下图:

image.png

定制交互

在 G2 V3 版本,自定义图例的交互需要用户操作图形/数据进行实现,而在 G2 4.0 版本,如果无意改变图形元素的响应样式,我们只需要声明需要的交互即可:

chart.removeInteraction('legend-filter');  // 图例过滤操作默认内置,如不需要可以移除
chart.interaction('element-active');       // 添加 element-active 交互:鼠标 hover 激活图形 active 状态
复制代码

2020-03-16 15-10-03.2020-03-16 15_10_56.gif

但是我们需要的是图形元素方法效果,所以我们需要配置下图形元素 active 状态的样式:

chart
  .interval()
  .state({
    active: {
      style: element => {
        const shape = element.shape;
        return {
          lineWidth: 10,
          stroke: shape.attr('fill'),
          strokeOpacity: shape.attr('fillOpacity'),
        };
      }, // 配置 active 样式,通过加粗边框实现放大效果
    },
  });
复制代码

2020-03-16 13-41-04.2020-03-16 13_41_28.gif

至此,三个步骤,个性化饼图的定制就结束了!

扩展

基于以上定制,我们还可以作进一步扩展,利用圆环空心部分的面积显示鼠标击中图形元素的详细信息,以代替 tooltip。当然这也并不麻烦,我们只需要:

关闭 Tooltip

chart.tooltip(false);
复制代码

在现有交互行为的基础上,添加 **callback**,更新 annotation 内容

// 绘制 annotation
let lastItem;
function updateAnnotation(data) {
  if (data.item !== lastItem) {
    chart.annotation().clear(true);
    chart
      .annotation()
      .text({
        position: ['50%', '50%'],
        content: data.item,
        style: {
          fontSize: 20,
          fill: '#8c8c8c',
          textAlign: 'center',
        },
        offsetY: -20,
      })
      .text({
        position: ['50%', '50%'],
        content: data.count,
        style: {
          fontSize: 28,
          fill: '#8c8c8c',
          textAlign: 'center',
        },
        offsetX: -10,
        offsetY: 20,
      })
      .text({
        position: ['50%', '50%'],
        content: '台',
        style: {
          fontSize: 20,
          fill: '#8c8c8c',
          textAlign: 'center',
        },
        offsetY: 20,
        offsetX: 20,
      });
    chart.render(true);
    lastItem = data.item;
  }
}

// 清空 annotation
function clearAnnotation() {
  chart.annotation().clear(true);
  chart.render(true);
  lastItem = null;
}

// 在现有 'element-active' 交互行为的基础上加上 callback 配置,用于动态更新 Annotation
// 'element-active' 定义:https://github.com/antvis/G2/blob/fdf485ce218f905b5416cb91e0e421b85a1b6925/src/index.ts#L264
chart.interaction('element-active', {
  start: [{
    trigger: 'element:mouseenter',
    action: 'element-active:active',
    callback(context) {
      if (context.event.data) {
        updateAnnotation(context.event.data.data);
      }
    },
  }],
  end: [{
    trigger: 'element:mouseleave',
    action: 'element-active:reset',
    callback() {
      clearAnnotation();
    }
  }],
});

// 在现有 'legend-active' 交互行为的基础上加上 callback 配置,用于动态更新 Annotation
// 'legend-active' 定义:https://github.com/antvis/G2/blob/fdf485ce218f905b5416cb91e0e421b85a1b6925/src/index.ts#L293
chart.interaction('legend-active', {
  showEnable: [
    { trigger: 'legend-item:mouseenter', action: 'cursor:pointer' },
    { trigger: 'legend-item:mouseleave', action: 'cursor:default' },
  ],
  start: [{
    trigger: 'legend-item:mouseenter',
    action: ['list-active:active', 'element-active:active'],
    callback(context) {
      const delegateObject = context.event.gEvent.shape.get('delegateObject');
      const targetData = data.filter(obj => obj.item === delegateObject.item.name);
      if (targetData.length) {
        updateAnnotation(targetData[0]);
      }
    }
  }],
  end: [{
    trigger: 'legend-item:mouseleave',
    action: ['list-active:reset', 'element-active:reset'],
    callback(context) {
      clearAnnotation();
    }
  }],
});
复制代码

2020-03-17 14-15-21.2020-03-17 14_15_51.gif


完整代码传送门: 链接

网址

G2 官网: g2.antv.vision/zh/
github:github.com/antvis/g2