AntV
Search…
Require on demand
F2 is designed for mobile visualization, therefore the package size is very important. F2 has modular structure provides package size optimization.

How to require on demand

  • STEP 1: Install F2
  • STEP 2: Require core library of F2(must be done)
  • STEP 3: Require modules what you want

Install F2

1
$ npm install @antv/f2
Copied!

Import core library of F2

1
const Core = require('@antv/f2/lib/core');
Copied!
This library contains the core processing logic of grammar of graphics, which contains the following:
  • Chart: Chart Class
  • Geom: The parent class of geometry, only contains the core processing of data, without any implementation of specific geometries such as line, area, bar i.e.
  • Attr: Attributes classes of charts, such as position, color, shape and size.
  • Scale: Only container the Linear, Cat and Identity these three basic types.
  • Coord: Only includes Cartesian coordinate.
  • Axis: Only contains the axes of Cartesian coordinate.
  • G: Rendering engine.

Require the demanded modules

The dynamically loadable modules are the following:
Geometry
Geometry module, used for drawing a specific chart:
  • require all of the geometries
1
require('@antv/f2/lib/geom/'); // require all the charts
Copied!
  • require specific geometry
1
require('@antv/f2/lib/geom/line'); // only line chart is required
2
require('@antv/f2/lib/geom/area'); // only the area chart is required
3
require('@antv/f2/lib/geom/interval'); // only the histogram is required
4
require('@antv/f2/lib/geom/path'); // only the path map is required
5
require('@antv/f2/lib/geom/point'); // only the dot chart is required
6
require('@antv/f2/lib/geom/polygon'); // only the color map is required
7
require('@antv/f2/lib/geom/schema'); // only the box chart, stock chart are required
Copied!
Coordinate
1
require('@antv/f2/lib/coord/polar'); // polar coordinate
2
3
require('@antv/f2/lib/coord/cartesian'); // Cartesian coordiante(already included in the core library)
Copied!
Axis
1
require('@antv/f2/lib/component/axis/circle'); // Arc axis for polar coordinate
2
3
require('@antv/f2/lib/component/axis/line'); // Axes for Cartesian coordinate(already included in the core library)
Copied!
Adjust
  • require all types of adjust
1
require('@antv/f2/lib/geom/adjust/');
Copied!
  • require specific adjust type
1
require('@antv/f2/lib/geom/adjust/dodge'); // only grouped adjust is required
2
require('@antv/f2/lib/geom/adjust/stack'); // only stacked adjust is required
Copied!
Scale
1
require('@antv/f2/lib/scale/time-cat'); // timeCat is required
Copied!
Animation
The animation module serves as a plugin for chart, therefore you need to register the module on chart after it is loaded.
1
const Animation = require('@antv/f2/lib/animation/detail');
2
Chart.plugins.register(Animation); // Global registration,you can also just register it
Copied!
Guide
Guide also serves as an plugin for chart. When using Guide, users can dynamically select the specific guide component to use, and then register the corresponding plug-in to the chart.
1
// Step 1: require the demanded guide componments
2
require('@antv/f2/lib/component/guide'); // require all guide components
3
4
// Or just require the specific guide component you want
5
require('@antv/f2/lib/component/guide/arc'); // only Guide.Arc is required
6
require('@antv/f2/lib/component/guide/html'); // only Guide.Html is required
7
require('@antv/f2/lib/component/guide/text'); // only Guide.Text is required
8
require('@antv/f2/lib/component/guide/rect'); // only Guide.Rect is required
9
require('@antv/f2/lib/component/guide/line'); // only Guide.Line is required
10
require('@antv/f2/lib/component/guide/tag'); // only Guide.Tag is required
11
require('@antv/f2/lib/component/guide/region-filter'); // only Guide.RegionFilter is required
12
require('@antv/f2/lib/component/guide/point'); // only Guide.Point is required
13
14
// Step 2: require the Guide plugin
15
const Guide = require('@antv/f2/lib/plugin/guide');
16
17
// Step 3: register Guide
18
Chart.plugins.register(Guide); // Global registration,you can also just register it
Copied!
Tooltip
Tooltip also serves as an plugin for chart.
1
// Step 1:require tooltip
2
const Tooltip = require('@antv/f2/lib/plugin/tooltip');
3
// Step 2:register Tooltip
4
Chart.plugins.register(Tooltip); // Global registration,you can also just register it
Copied!
Legend
Legend also serves as an plugin for chart.
1
// Step 1: require Legend
2
const Legend = require('@antv/f2/lib/plugin/legend');
3
// Step 2: register Legend
4
Chart.plugins.register(Legend); // Global registration,you can also just register it
Copied!
Interaction
  • require all of the interactions
1
require('@antv/f2/lib/interaction/');
Copied!
  • require the specific interaction
1
require('@antv/f2/lib/interaction/pie-select'); // selection for pie chart
2
3
require('@antv/f2/lib/interaction/interval-select'); // selection for bar chart
4
5
require('@antv/f2/lib/interaction/pan'); // chart pan
6
7
require('@antv/f2/lib/interaction/pinch'); // chart pinch
Copied!
ScrollBar
ScrollBar also serves as an plugin for chart.
1
const ScrollBar = require('@sntv/f2/lib/plugin/scroll-bar');
2
F2.Chart.plugins.register(ScrollBar);
Copied!

Example

If you only need to draw a pie chart without animation:
1
const F2 = require('@antv/f2/lib/core'); // must be required
2
require('@antv/f2/lib/geom/interval'); // require interval geometry
3
require('@antv/f2/lib/coord/polar'); // require polar coordinate
4
require('@antv/f2/lib/geom/adjust/stack'); // requre the type of data adjust
Copied!

Visulization tool

For convenience, we provide UI-based require-on-demand packaging tool to help developers download the required charts and components. The usage is as follows:
1
# Go to the root directory of the F2 project and run:
2
$ npm run bundler
Copied!
In the interface that appears, check the required module, and finally package and download it.
Last modified 3yr ago