几何标记 geom 的选中

注意：选中模式配置属性 selectedMode， 在 [email protected] 及以上 已改为 mode，2.3.0 以下版本请使用 selectedMode。

各个几何标记 geom 选中的模式包含如下三种：

  • 不可选中；
  • 单选；
  • 多选。选中模式的设置方式如下（在 geom 对象上添加了 selected() 方法）：
  1. // 开启选中模式并设置模式以及选中样式，其中 true 可省略
  2. chart.polygon().position('x*y').selected(true, {
  3.   mode: 'multiple' || 'single' || false, // [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
  4.   style: {
  5.     // 设置选中图形的样式，如不设置则使用默认的样式
  6.   }
  7. });
  8. // 关闭选中模式
  9. chart.polygon().position('x*y').selected(false); // 关闭方式 1
  10. chart.polygon().position('x*y').selected({
  11.   mode: false // [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
  12. }); // 关闭方式 2

默认情况下，G2 中只有饼图支持选中交互，其他 geom 的选中模式默认情况下都是关闭的。

下面通过两个实例来演示选中 selected(enable, cfg) 方法的使用。

示例：地图省市下钻

本例中的地图 GeoJSON 数据请访问该地址获取：

  1. <script src="https://a.alipayobjects.com/g/datavis/china-geojson/1.0.0/index.js"></script>

或者 github。

  1. function processData(mapData) {
  2.   var result = [];
  3.   var features = mapData.features;
  4.   for (var i = 0; i < features.length; i++) {
  5.     var name = features[i].properties.name;
  6.     result.push({
  7.       "name": name,
  8.       "value": Math.round(Math.random() * 1000)
  9.     });
  10.   }
  11.   return result;
  12. }
  14. function renderProvinceChart(provinceChart, name) {
  15.   var provinceData = ChinaGeoJSON[name];
  16.   provinceChart.clear();
  17.   provinceChart.source(processData(provinceData));
  18.   provinceChart.polygon().position(Stat.map.region('name', provinceData))
  19.     .label('name', {
  20.       label: {
  21.         fill: '#333'
  22.       }
  23.     })
  24.     .style({
  25.       stroke: '#fff',
  26.       lineWidth: 1
  27.     })
  28.     .color('value', '#e5f5e0-#31a354');
  29.   provinceChart.render();
  30. }
  32. var Stat = G2.Stat;
  33. var mapData = ChinaGeoJSON['China'];
  34. var chart = new G2.Chart({
  35.   id: 'china',
  36.   width: 250,
  37.   height: 180,
  38.   plotCfg: {
  39.     margin: [0, 10]
  40.   }
  41. });
  42. chart.source(processData(mapData));
  43. chart.tooltip({
  44.   title: null
  45. });
  46. chart.polygon().position(Stat.map.region('name', mapData)).tooltip('name')
  47.   .style({
  48.     stroke: '#999',
  49.     lineWidth: 1,
  50.     fill: '#ccc',
  51.     globalAlpha: 0.9,
  52.     cursor: 'pointer' // 设置鼠标手势
  53.   }).selected({ // 设置是否允许选中以及选中样式
  54.     mode: 'single', // 多选还是单选， [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
  55.     style: {
  56.       fill: '#fe9929' // 选中的样式
  57.     }
  58.   });
  59. chart.render();
  61. var provinceChart = new G2.Chart({
  62.   id: 'province',
  63.   width: 600,
  64.   height: 500,
  65.   plotCfg: {
  66.     margin: [20, 80, 40, 40]
  67.   }
  68. });
  70. var shapeData = chart.getAllGeoms()[0].getData();
  71. for (var i = 0, len = shapeData.length; i < len; i++) {
  72.   var item = shapeData[i];
  73.   var origin = item['_origin'];
  74.   var name = origin.name;
  75.   if (name === '浙江') {
  76.     renderProvinceChart(provinceChart, name);
  77.     chart.getAllGeoms()[0].setSelected(item);
  78.   }
  79. }
  81. chart.on('plotclick', function(ev) {
  82.   var shape = ev.shape;
  83.   if (shape && shape.get('selected')) {
  84.     var item = shape.get('origin');
  85.     var data = item['_origin'];
  86.     var name = data.name;
  87.     renderProvinceChart(provinceChart, name);
  88.   } else {
  89.     provinceChart.clear();
  90.   }
  91. });

图表框选交互

默认框选的功能是关闭的，通过调用如下方法开启和关闭框选功能：

  1. chart.setMode('select'); // 开启框选模式
  2. chart.setMode(false); // 关闭

目前我们提供了如下三种框选交互形式：

  1. chart.select('rangeX'); // 使用 X 轴范围的框选
  2. chart.selcet('rangeY'); // 使用 Y 轴范围的框选
  3. chart.select('rangeXY'); // 使用 X 和 Y 轴的框选

框选事件

同框选相关的事件如下：

  1. // 框选开始
  2. chart.on('rangeselectstart', function(ev) {
  3.   console.log(ev);
  4. });
  5. // 框选结束
  6. chart.on('rangeselectend', function(ev) {
  7.   console.log(ev);
  8. });
  9. // 双击事件，通常用于将图表恢复至原始状态
  10. chart.on('plotdblclick', function(ev) {
  11.   console.log(ev);
  12. });

rangeselectend 事件返回的参数中有一个属性名为 selected 的参数，其格式如下：

  1. // ev.selected: 被选择区域对应的维度即值范围，格式如下：
  2. {
  3.   dimX: [min, max], // 当 dimX 值对应为连续数据时，返回值区间
  4.   dimY: [yValue1, yValue2, ... , yValueN] // 当 dimY 值对应为分类数据时，返回值
  5. }

框选示例

下面通过具体的实例来展示框选的效果。

注意：下面例子中只定义了 X 轴的框选效果，当鼠标双击时，图表恢复至原始状态。

  1. $.getJSON('../../../../../static/data/avg-temp.json', function(data) {
  2.   var Frame = G2.Frame;
  3.   var frame = new Frame(data);
  4.   frame = Frame.combinColumns(frame, ['New York', 'San Francisco', 'Austin'], 'value', 'city', 'date');
  5.   var chart = new G2.Chart({
  6.     id: 'c1',
  7.     width: 800,
  8.     height: 400,
  9.     plotCfg: {
  10.       margin: [60, 30, 30]
  11.     }
  12.   });
  13.   chart.setMode('select'); // 开启框选模式
  14.   chart.select('rangeX'); // 选择框选交互形式
  15.   chart.source(frame, {
  16.     date: {
  17.       type: 'time'
  18.     },
  19.     value: {
  20.       alias: 'Temperature, ºF'
  21.     }
  22.   });
  23.   chart.legend({
  24.     position: 'top'
  25.   });
  26.   chart.axis('date', {
  27.     line: {
  28.       stroke: '#000'
  29.     },
  30.     tickLine: {
  31.       stroke: '#000',
  32.       value: 6 // 刻度线长度
  33.     },
  34.     title: null,
  35.     labels: {
  36.       label: {
  37.         textAlign: 'start'
  38.       }
  39.     }
  40.   });
  41.   chart.axis('value', {
  42.     title: null,
  43.     tickLine: {
  44.       stroke: '#000',
  45.       value: 6 // 刻度线长度
  46.     },
  47.     labels: {
  48.       label: {
  49.         fill: '#000'
  50.       }
  51.     },
  52.     line: {
  53.       stroke: '#000'
  54.     },
  55.     grid: null
  56.   });
  57.   chart.line().position('date*value').color('city', ['#1f77b4', '#ff7f0e', '#2ca02c']).shape('spline').size(2);
  58.   chart.render();
  60.   // 监听双击事件，这里用于复原图表
  61.   chart.on('plotdblclick', function(ev) {
  62.     chart.get('options').filters = {};
  63.     chart.repaint();
  64.   });
  65. });