教程

『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。为此从 2.2.0 版本开始，我们为 G2 加入了框选事件支持。

语法使用

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

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('plotdbclick', 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('plotdbclick', function(ev) {
    chart.set('filters', {});
    chart.repaint();
  });
});