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');
  43. chart.render();
  44. chart.on('interval:click', ev => {
  45. const data = ev.data;
  46. if (data) {
  47. const name = data._origin['name'];
  48. window.open('http://www.baidu.com/s?wd=' + name);
  49. }
  50. });

说明:

  • 通过 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();
  32. chart.on('tooltip:change', ev => {
  33. const item = ev.items[0]; // 获取tooltip要显示的内容
  34. item.value = '格式化-' + (item.value * 100).toFixed(2) + '%';
  35. });