Select a one-, two-dimensional or irregular region using the mouse.
npm install @antv/g2-brush
``bash`
$ npm install @antv/g2-brush
or use cdn:
`html`
First of all, the brush instance must be created after the chart be rendered.
`js
import Brush from '@antv/g2-brush';
// ...
chart.render();
new Brush({
canvas: chart.get('canvas'), // must be set
chart, // if you want to filter data by default, please set the chart
type: 'X', // set the brush type, default value is 'XY'
});
`
online demos: https://antvis.github.io/g2-brush/demos/#
`js
$.getJSON('./data/top2000.json', data => {
const ds = new DataSet();
const dv = ds.createView('test')
.source(data)
.transform({
as: [ 'count' ],
groupBy: [ 'release' ],
operations: [ 'count' ],
type: 'aggregate'
});
const chart = new G2.Chart({
container: 'canvas',
forceFit: true,
height: window.innerHeight
});
chart.source(dv);
chart.scale({
count: {
alias: 'top2000 唱片总量'
},
release: {
tickInterval: 5,
alias: '唱片发行年份'
}
});
chart.interval()
.position('release*count')
.color('#e50000');
chart.render();
new Brush({
canvas: chart.get('canvas'),
chart,
type: 'X',
onBrushstart() {
chart.hideTooltip();
},
onBrushmove() {
chart.hideTooltip();
}
});
chart.on('plotdblclick', () => {
chart.get('options').filters = {};
chart.repaint();
});
});
`
`bash
$ npm install
$ npm run dev
``
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.