图表事件 event

简介如何使用示例 1：饼图点击跳转示例 2：动态改变 tooltip 显示信息简介chart 对象提供了各种事件支持，以响应用户的操作，方便用户扩展交互。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。 G2 中的事件用法如下：

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

其中 eventType 对应时间名称，均使用小写。 对于事件的移除，chart.off(‘eventType’, fn) 其中如果 fn 不指定，表示删除所有 eventType 事件，如果 eventType 和 fn 都不指定，则表示删除 chart 上所有的事件。 目前 G2 提供的时间可以分为三种：

图表坐标系内的事件： plotmove、plotenter、plotleave、plotclick、plotdblclick、rangeselectstart、rangeselectend 图形元素上的事件：itemselected、itemunselected、itemselectedchange tooltip 上的事件：tooltipchange、tooltipshow、tooltiphide

详细的使用详见 api。 如何使用示例 1：饼图点击跳转先来看一个简单的点击饼图后跳转至相应页面的例子。 通过监听 plotclick 事件，然后根据 ev 参数中的 data 字段的 _origin 属性值获取被点击区域的原始数据，以获取对应浏览器的名称。 plotclick 事件包含的参数 ev，这是一个包含点击图形的数据信息的对象，格式如下：

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

完整代码：

  1. var 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. var Stat = G2.Stat;
  10. var chart = new G2.Chart({
  11.   id: 'c1',
  12.   width: 500,
  13.   height: 400
  14. });
  15. chart.source(data);
  16. // 重要：绘制饼图时，必须声明 theta 坐标系
  17. chart.coord('theta', {
  18.   radius: 0.8 // 设置饼图的大小
  19. });
  20. chart.legend({
  21.   position: 'bottom'
  22. });
  23. chart.intervalStack()
  24.   .position(Stat.summary.percent('value'))
  25.   .color('name')
  26.   .label('name');
  28. chart.render();
  30. // 监听click事件
  31. chart.on('plotclick',function(ev){
  32.   var data = ev.data;
  33.   if (data) {
  34.     var name = data._origin['name'];
  35.     window.open('http://www.baidu.com/s?wd=' + name);
  36.   }
  37. });

示例 2：动态改变 tooltip 显示信息通过监听 tooltipchange 事件，可以做到动态得改变 tooltip 的显示信息，以完成 tooltip 的高度个性化定制。 tooltipchange 事件的参数格式如下：

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

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

  1. $.getJSON('../../../../../static/data/diamond.json', function(data) {
  2.   var Stat = G2.Stat;
  3.   var chart = new G2.Chart({
  4.     id: 'c2',
  5.     width: 800,
  6.     height: 400,
  7.     plotCfg: {
  8.       margin: [20, 80, 60, 60]
  9.     }
  10.   });
  11.   chart.source(data);
  12.   chart.coord('theta', {
  13.     radius: 0.6 // 设置饼图的半径，设置的数值必须在 [0, 1] 范围内
  14.   });
  15.   // 不同 cut（切割工艺）所占的比例
  16.   chart.intervalStack()
  17.     .position(Stat.summary.proportion())
  18.     .color('cut');
  19.   chart.render();
  20.   chart.on('tooltipchange',function(ev){
  21.     var item = ev.items[0]; // 获取tooltip要显示的内容
  22.     item.value = '格式化-' +  item.value;
  23.   });
  24. });
  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="