图表交互

几何标记 geom 的选中

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

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

不可选中；
单选；
多选。

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

// 开启选中模式并设置模式以及选中样式，其中 true 可省略
chart.polygon().position('x*y').selected(true, {
  mode: 'multiple' || 'single' || false, // [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
  style: {
    // 设置选中图形的样式，如不设置则使用默认的样式
  }
});
// 关闭选中模式
chart.polygon().position('x*y').selected(false); // 关闭方式 1
chart.polygon().position('x*y').selected({
  mode: false // [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
}); // 关闭方式 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();
  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({ // 设置是否允许选中以及选中样式
    mode: 'single', // 多选还是单选， [email protected] 及以上使用 `mode`，2.3.0 以下版本请使用 `selectedMode`
    style: {
      fill: '#fe9929' // 选中的样式
    }
  });
chart.render();

var provinceChart = new G2.Chart({
  id: 'province',
  width: 600,
  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 && shape.get('selected')) {
    var item = shape.get('origin');
    var data = item['_origin'];
    var name = data.name;
    renderProvinceChart(provinceChart, name);
  } else {
    provinceChart.clear();
  }
});

图表框选交互

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

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

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

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

框选事件

同框选相关的事件如下：

// 框选开始
chart.on('rangeselectstart', function(ev) {
  console.log(ev);
});
// 框选结束
chart.on('rangeselectend', function(ev) {
  console.log(ev);
});
// 双击事件，通常用于将图表恢复至原始状态
chart.on('plotdblclick', function(ev) {
  console.log(ev);
});

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

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

框选示例

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

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

$.getJSON('../../../../../static/data/avg-temp.json', function(data) {
  var Frame = G2.Frame;
  var frame = new Frame(data);
  frame = Frame.combinColumns(frame, ['New York', 'San Francisco', 'Austin'], 'value', 'city', 'date');
  var chart = new G2.Chart({
    id: 'c1',
    width: 800,
    height: 400,
    plotCfg: {
      margin: [60, 30, 30]
    }
  });
  chart.setMode('select'); // 开启框选模式
  chart.select('rangeX'); // 选择框选交互形式
  chart.source(frame, {
    date: {
      type: 'time'
    },
    value: {
      alias: 'Temperature, ºF'
    }
  });
  chart.legend({
    position: 'top'
  });
  chart.axis('date', {
    line: {
      stroke: '#000'
    },
    tickLine: {
      stroke: '#000',
      value: 6 // 刻度线长度
    },
    title: null,
    labels: {
      label: {
        textAlign: 'start'
      }
    }
  });
  chart.axis('value', {
    title: null,
    tickLine: {
      stroke: '#000',
      value: 6 // 刻度线长度
    },
    labels: {
      label: {
        fill: '#000'
      }
    },
    line: {
      stroke: '#000'
    },
    grid: null
  });
  chart.line().position('date*value').color('city', ['#1f77b4', '#ff7f0e', '#2ca02c']).shape('spline').size(2);
  chart.render();

  // 监听双击事件，这里用于复原图表
  chart.on('plotdblclick', function(ev) {
    chart.get('options').filters = {};
    chart.repaint();
  });
});

图表事件 event 数据异步加载与动态更新