教程

概述

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

G2 中的事件用法如下：

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

其中 eventType 对应时间名称，均使用小写。 对于事件的移除，chart.off('eventType', fn) 其中如果 fn 不指定，表示删除所有 eventType 事件，如果 eventType 和 fn 都不指定，则表示删除 chart 上所有的事件。

目前 G2 提供的时间可以分为三种：

  1. 图表坐标系内的事件： plotmove、plotenter、plotleave、plotclick

  2. 图形元素上的事件：itemselected、itemunselected、itemselectedchange

  3. tooltip 上的事件：tooltipchange、tooltipshow、tooltiphide

详细的使用详见 api。

示例：饼图点击跳转

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

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

plotclick 事件包含的参数 ev，这是一个包含点击图形的数据信息的对象，格式如下：

{
  data: object, // 当前被点击的数据，存储的是经过映射处理的数据，原始的数据通过 data._origin 字段获取
  geom: object, // 被点击的几何标记对象
  shape: object, // 被点击的几何形状对象
  target: object, // 被点击的 canvas 元素
  toElement: htmlElement, // 目标 dom 元素
  views: array, // 当前被点击区域所在的视图
  x: number, // 鼠标点击的 x 坐标点
  y: number // 鼠标点击的 y 坐标点
}

完整代码：

var data = [
  {name: 'IE', value: 56.33 },
  {name: 'Chrome', value: 24.03},
  {name: 'Firefox', value: 10.38},
  {name: 'Safari',  value: 4.77},
  {name: 'Opera', value: 0.91},
  {name: 'Unknown', value: 0.2}
];
var Stat = G2.Stat;
var chart = new G2.Chart({
  id: 'c1',
  width: 500,
  height: 400
});
chart.source(data);
// 重要：绘制饼图时，必须声明 theta 坐标系
chart.coord('theta', {
  radius: 0.8 // 设置饼图的大小
});
chart.legend({
  position: 'bottom'
});
chart.intervalStack()
  .position(Stat.summary.percent('value'))
  .color('name')
  .label('name');

chart.render();

// 监听click事件
chart.on('plotclick',function(ev){
  var data = ev.data;
  if (data) {
    var name = data._origin['name'];
    window.open('http://www.baidu.com/s?wd=' + name);
  }
});

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

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

tooltipchange 事件的参数格式如下：

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

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

完整代码如下：

$.getJSON('../static/data/diamond.json', function(data) {
  var Stat = G2.Stat;
  var chart = new G2.Chart({
    id: 'c2',
    width: 800,
    height: 400,
    plotCfg: {
      margin: [20, 80, 60, 60]
    }
  });
  chart.source(data);
  chart.coord('theta', {
    radius: 0.6 // 设置饼图的半径，设置的数值必须在 [0, 1] 范围内
  });
  // 不同 cut（切割工艺）所占的比例
  chart.intervalStack()
    .position(Stat.summary.proportion())
    .color('cut');
  chart.render();
  chart.on('tooltipchange',function(ev){
    var item = ev.items[0]; // 获取tooltip要显示的内容
    item.value = '格式化-' +  item.value;
  });
});