chart 对象提供了各种事件支持，以响应用户的操作，方便用户扩展交互。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

G2 中的事件用法如下：

  1. chart.on('eventType', fn); // 绑定事件
  2. chart.off('eventType', fn); // 移除事件

其中 eventType 对应事件名称，均使用小写。

对于事件的移除，chart.off('eventType', fn) 其中如果 fn 不指定，表示删除所有 eventType 事件，如果 eventType 和 fn 都不指定，则表示删除 chart 上所有的事件。

在 G2 中，我们将事件分为如下事件：

  1. 画布基础事件，如 mousedown click dblclick 等；
  1. chart.on('mousedown', ev => {});
  2. chart.on('mousemove', ev => {});
  3. chart.on('mouseleave', ev => {});
  4. chart.on('mouseup', ev => {});
  5. chart.on('click', ev => {});
  6. chart.on('dblclick', ev => {});
  7. chart.on('touchstart', ev => {});
  8. chart.on('touchmove', ev => {});
  9. chart.on('touchend', ev => {});
  1. 绘图区域事件，如 plotmove plotclick 等；
  1. chart.on('plotenter', ev => {});
  2. chart.on('plotmove', ev => {});
  3. chart.on('plotleave', ev => {});
  4. chart.on('plotclick', ev => {});
  5. chart.on('plotdblclick', ev => {});
  1. tooltip 事件；
  1. chart.on('tooltip:show', ev => {}); // tooltip 展示
  2. chart.on('tooltip:hide', ev => {}); // tooltip 隐藏
  3. chart.on('tooltip:change', ev => {}); // tooltip 内容发生变化的时候
  1. 图形元素事件，即组成图表的各种图形元素；我们以 『图形元素名』+ 『基础事件名』 的方式来组合图形元素上的事件，帮助用户进行更精准的事件监听，同时也给交互提供了更大的可能性。

图表事件 - 图1

  1. chart.on('point:click', ev => {});
  2. chart.on('axis-label:click', ev => {});
  3. img,[object Object],

下图展示了图表各个组件的名称：图表事件 - 图2

详细的使用详见 api。

如何使用

示例 1：饼图点击跳转

先来看一个简单的点击饼图后跳转至相应页面的例子。
图表事件 - 图3

通过监听 interval:click 事件，然后根据 ev 参数中的 data 字段的 _origin 属性值获取被点击区域的原始数据，以获取对应浏览器的名称。

完整代码：

  1. const data = [
  2.   { name: 'IE', value: 56.33 },
  3.   { name: 'Chrome', value: 24.03 },
  4.   { name: 'Firefox', value: 10.38 },
  5.   { name: 'Safari',  value: 4.77 },
  6.   { name: 'Opera', value: 0.91 },
  7.   { name: 'Unknown', value: 0.2 }
  8. ];
  9. const DataView = DataSet.DataView;
  10. const dv = new DataView();
  11. dv.source(data).transform({
  12.   type: 'percent',
  13.   field: 'value',
  14.   dimension: 'name',
  15.   as: 'percent'
  16. });
  17. const chart = new G2.Chart({
  18.   container: 'c1',
  19.   forceFit: true,
  20.   height: 400
  21. });
  22. chart.source(dv);
  23. // 重要：绘制饼图时，必须声明 theta 坐标系
  24. chart.coord('theta', {
  25.   radius: 0.8 // 设置饼图的大小
  26. });
  27. chart.tooltip({
  28.   showTitle: false
  29. });
  30. chart.intervalStack()
  31.   .position('percent')
  32.   .color('name')
  33.   .tooltip('name*percent', (name, percent) => {
  34.     return {
  35.       name,
  36.       value: (percent * 100).toFixed(2) + '%'
  37.     };
  38.   })
  39.   .style({
  40.     cursor: 'pointer'
  41.   })
  42.   .label('name');
  44. chart.render();
  46. chart.on('interval:click', ev => {
  47.   const data = ev.data;
  48.   if (data) {
  49.     const name = data._origin['name'];
  50.     window.open('http://www.baidu.com/s?wd=' + name);
  51.   }
  52. });

说明：

  • 通过 interval:click 监听饼图的点击事件

  • 通过 style 方法中设置 cursor: ‘pointer’ 改变鼠标形状

示例 2：动态改变 tooltip 显示信息

通过监听 tooltip:change 事件，可以做到动态得改变 tooltip 的显示信息，以完成 tooltip 的高度个性化定制。

tooltip:change 事件的参数格式如下：

  1. {
  2.   items: array, // tooltip 上显示的记录信息
  3.   tooltip: object, // 当前 tooltip 对象
  4.   x: number, // 鼠标点击的 x 坐标点
  5.   y: number // 鼠标点击的 y 坐标点
  6. }

通过 ev.items[0] 获取 tooltip 上的第一条记录数据，重复复制该记录的 value 属性。

图表事件 - 图4
完整代码如下：

  1. const data = [
  2.   { name: '示例 A', value: 38.8 },
  3.   { name: '示例 B', value: 9.15 },
  4.   { name: '示例 C', value: 26.35 },
  5.   { name: '示例 D ',  value: 22.6 },
  6.   { name: '示例 E', value: 3.1 }
  7. ];
  8. const dv = new DataSet.DataView();
  9. dv.source(data).transform({
  10.   type: 'percent',
  11.   field: 'value',
  12.   dimension: 'name',
  13.   as: 'percent'
  14. });
  15. const chart = new G2.Chart({
  16.   container: 'c2',
  17.   width: 800,
  18.   height: 400
  19. });
  20. chart.source(dv);
  21. // 重要：绘制饼图时，必须声明 theta 坐标系
  22. chart.coord('theta', {
  23.   radius: 0.8 // 设置饼图的大小
  24. });
  25. chart.tooltip({
  26.   showTitle: false
  27. });
  28. chart.intervalStack()
  29.   .position('percent')
  30.   .color('name');
  31. chart.render();
  33. chart.on('tooltip:change', ev => {
  34.   const item = ev.items[0]; // 获取tooltip要显示的内容
  35.   item.value = '格式化-' + (item.value * 100).toFixed(2) + '%';
  36. });