141 lines
2.7 KiB
Markdown
141 lines
2.7 KiB
Markdown
|
# API
|
|||
|
|
|
|||
|
|
First of all, the brush instance must be created after the chart be rendered.
|
|||
|
|
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import Brush from '@antv/brush';
|
|||
|
|
|
|||
|
|
const brush = new Brush({
|
|||
|
|
// properties
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Properties
|
|||
|
|
|
|||
|
|
- `canvas`
|
|||
|
|
|
|||
|
|
An instance of G.Canvas. **Must be set**. If use it for G2 chart, just get it by `chart.get('canvas')`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
canvas: chart.get('canvas')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `chart`
|
|||
|
|
|
|||
|
|
An instance of G2.Chart. Set the brush target, then after brush action end,
|
|||
|
|
data will be automatically filtered when the `filter` property is true.
|
|||
|
|
|
|||
|
|
- `type`
|
|||
|
|
|
|||
|
|
String. Set the brush type, default is **'XY'**, also you can set **'X'**, **'Y'**, **'POLYGON'**. Case insensitive.
|
|||
|
|
|
|||
|
|
- `style`
|
|||
|
|
|
|||
|
|
Object. It's for setting the brush style. Default value is:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
{
|
|||
|
|
fill: '#C5D4EB',
|
|||
|
|
opacity: 0.3,
|
|||
|
|
lineWidth: 1,
|
|||
|
|
stroke: '#82A6DD'
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `inPlot`
|
|||
|
|
|
|||
|
|
Boolean. Decide if the selection range is limited to the drawing area. Default value is true.
|
|||
|
|
|
|||
|
|
- `filter`
|
|||
|
|
|
|||
|
|
Boolean. Decide if automatically filter the data, default value is decided by `dragable` value，!dragable. But still set by the user.
|
|||
|
|
|
|||
|
|
- `dragable`
|
|||
|
|
|
|||
|
|
Boolean. Set whether the shape can be dragged, default is `false`, then `filter` is true.
|
|||
|
|
|
|||
|
|
- `xField`
|
|||
|
|
|
|||
|
|
String. Set the selected x-axis field name, used to get the scale instance of the x-axis. Optional.
|
|||
|
|
|
|||
|
|
- `yField`
|
|||
|
|
|
|||
|
|
String. Set the selected y-axis field name, used to get the scale instance of the y-axis. Optional.
|
|||
|
|
|
|||
|
|
- `onBrushstart`
|
|||
|
|
|
|||
|
|
Function. [examples](https://antvis.github.io/g2-brush/demos/#/highlight)
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
onBrushstart(ev) {
|
|||
|
|
// at the begining of the selection, you can define some properties, like chart xScale etc.
|
|||
|
|
const me = this; // On behalf of the object itself
|
|||
|
|
me.chart = chart;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `onBrushmove`
|
|||
|
|
|
|||
|
|
Function. [examples](https://antvis.github.io/g2-brush/demos/#/highlight)
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
onBrushmove(ev) {
|
|||
|
|
// during selection
|
|||
|
|
const { data, shapes, x, y, ...others } = ev;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `onBrushend`
|
|||
|
|
|
|||
|
|
Function. [examples]()
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
onBrushend(ev) {
|
|||
|
|
// selection stoped
|
|||
|
|
const { data, shapes, x, y, ...others } = ev;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `onDragstart`
|
|||
|
|
|
|||
|
|
Function. Only `dragable` is true.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
onDragstart(ev) {
|
|||
|
|
// at the begining of the drag, you can define some properties, like chart xScale etc.
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `onDragmove`
|
|||
|
|
|
|||
|
|
Function. Only `dragable` is true.
|
|||
|
|
|
|||
|
|
[examples](https://antvis.github.io/g2-brush/demos/#/highlight)
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
onDragmove(ev) {
|
|||
|
|
// during drag
|
|||
|
|
const { data, shapes, x, y, ...others } = ev;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- `onDragend`
|
|||
|
|
|
|||
|
|
Function. Only `dragable` is true.
|
|||
|
|
|
|||
|
|
[examples](https://antvis.github.io/g2-brush/demos/#/highlight)
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
onDragend(ev) {
|
|||
|
|
// drag stoped
|
|||
|
|
const { data, shapes, x, y, ...others } = ev;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Function
|
|||
|
|
|
|||
|
|
- `setType(type)`
|
|||
|
|
|
|||
|
|
used for change brush type, see [examples](https://antvis.github.io/g2-brush/demos/#/highlight).
|