教程

从 G2 2.2.0 版本开始，我们为各个几何标记 geom 增加了选中交互支持，选中的模式包含如下三种：

  1. 不可选中；
  2. 单选；
  3. 多选。

选中模式的设置方式如下（在 geom 对象上添加了 selected() 方法）：

// 开启选中模式并设置模式以及选中样式，其中 true 可省略
chart.polygon().position('x*y').selected(true, {
  selectedMode: 'multiple' || 'single' || false,
  style: {
    // 设置选中图形的样式，如不设置则使用默认的样式
  }
});
// 关闭选中模式
chart.polygon().position('x*y').selected(false); // 关闭方式 1
chart.polygon().position('x*y').selected({
  selectedMode: false
}); // 关闭方式 2

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

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

地图省市下钻

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

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

或者 github。

function processData(mapData) {
  var result = [];
  var features = mapData.features;
  for (var i = 0; i < features.length; i++) {
    var name = features[i].properties.name;
    result.push({
      "name": name,
      "value": Math.round(Math.random() * 1000)
    });
  }
  return result;
}

function renderProvinceChart(provinceChart, name) {
  var provinceData = ChinaGeoJSON[name];
  provinceChart.clear();
  if (!provinceData) {
    return false;
  }
  provinceChart.source(processData(provinceData));
  provinceChart.polygon().position(Stat.map.region('name', provinceData))
    .label('name', {
      label: {
        fill: '#333'
      }
    })
    .style({
      stroke: '#fff',
      lineWidth: 1
    })
    .color('value', '#e5f5e0-#31a354');
  provinceChart.render();
}

var Stat = G2.Stat;
var mapData = ChinaGeoJSON['China'];
var chart = new G2.Chart({
  id: 'china',
  width: 250,
  height: 180,
  plotCfg: {
    margin: [0, 10]
  }
});
chart.source(processData(mapData));
chart.tooltip({
  title: null
});
chart.polygon().position(Stat.map.region('name', mapData)).tooltip('name')
  .style({
    stroke: '#999',
    lineWidth: 1,
    fill: '#ccc',
    globalAlpha: 0.9,
    cursor: 'pointer' // 设置鼠标手势
  }).selected({ // 设置是否允许选中以及选中样式
    selectedMode: 'single', // 多选还是单选
    style: {
      fill: '#fe9929' // 选中的样式
    }
  });
chart.render();

var provinceChart = new G2.Chart({
  id: 'province',
  width: 700,
  height: 500,
  plotCfg: {
    margin: [20, 80, 40, 40]
  }
});

var shapeData = chart.getAllGeoms()[0].getData();
for (var i = 0, len = shapeData.length; i < len; i++) {
  var item = shapeData[i];
  var origin = item['_origin'];
  var name = origin.name;
  if (name === '浙江') {
    renderProvinceChart(provinceChart, name);
    chart.getAllGeoms()[0].setSelected(item);
  }
}

chart.on('plotclick', function(ev) {
  var shape = ev.shape;
  if (!shape) {
    return false;
  }

  if (shape && shape.get('selected')) {
    var item = shape.get('origin');
    var data = item['_origin'];
    var name = data.name;
    renderProvinceChart(provinceChart, name);
  } else {
    provinceChart.clear();
  }
});