g2-brush

Install

1$ npm install @antv/g2-brush

or use cdn:

1<script src="https://gw.alipayobjects.com/os/antv/assets/g2-brush/0.0.1/g2-brush.js"></script>

Usage

First of all, the brush instance must be created after the chart be rendered.

1import Brush from '@antv/g2-brush';
2// ...
3chart.render();
4
5new Brush({
6  canvas: chart.get('canvas'), // must be set
7  chart, // if you want to filter data by default, please set the chart
8  type: 'X', // set the brush type, default value is 'XY'
9});

Example

online demos: https://antvis.github.io/g2-brush/demos/#

1$.getJSON('./data/top2000.json', data => {
2  const ds = new DataSet();
3  const dv = ds.createView('test')
4    .source(data)
5    .transform({
6      as: [ 'count' ],
7      groupBy: [ 'release' ],
8      operations: [ 'count' ],
9      type: 'aggregate'
10    });
11
12  const chart = new G2.Chart({
13    container: 'canvas',
14    forceFit: true,
15    height: window.innerHeight
16  });
17  chart.source(dv);
18  chart.scale({
19    count: {
20      alias: 'top2000 唱片总量'
21    },
22    release: {
23      tickInterval: 5,
24      alias: '唱片发行年份'
25    }
26  });
27  chart.interval()
28    .position('release*count')
29    .color('#e50000');
30
31  chart.render();
32
33  new Brush({
34    canvas: chart.get('canvas'),
35    chart,
36    type: 'X',
37    onBrushstart() {
38      chart.hideTooltip();
39    },
40    onBrushmove() {
41      chart.hideTooltip();
42    }
43  });
44  chart.on('plotdblclick', () => {
45    chart.get('options').filters = {};
46    chart.repaint();
47  });
48});

API

API DOCS

Development

1$ npm install
2
3$ npm run dev

How to Contribute

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.