Interaction
F2 provides an interaction mechanism to achieve the encapsulation and reuse of common interaction behavior. Based on this mechanism, we provide the following four common interactions:
Interaction | Demo |
Selection for pie chart | |
Selection for bar chart | |
Pan | |
Pinch | |
.gif?alt=media&token=51352f66-70a0-4b78-8653-c2ab046ef6b9)
For developers, they can encapsulate their own interaction behavior based on this mechanism. For details, see the Custom Interaction Behavior(todo).
For better package size, interaction mode is not packaged by default into @antv/f2. So we should require it.
// import F2const F2 = require('@antv/f2/lib/index');// import all interations we providerequire('@antv/f2/lib/interaction/');// If you just want to use one// import pie chart selection interactionrequire('@antv/f2/lib/interaction/pie-select');// import bar chart selection interactionrequire('@antv/f2/lib/interaction/interval-select');// import pan interactionrequire('@antv/f2/lib/interaction/pan');// import pinch interactionrequire('@antv/f2/lib/interaction/pinch');
The touch gestures for interactions all base on Hammer.js.
call interaction
chart.interaction('name', config);
clear interaction
chart.clearInteraction() // clear all interactions for current chart instancechart.clearInteraction('name') // clear the interaction whose name is 'name'
Last updated 2 years ago