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

$ npm install @antv/f2

Import core library of F2

const Core = require('@antv/f2/lib/core');

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

require('@antv/f2/lib/geom/'); // require all the charts

• require specific geometry

require('@antv/f2/lib/geom/line'); // only line chart is required
require('@antv/f2/lib/geom/area'); // only the area chart is required
require('@antv/f2/lib/geom/interval'); // only the histogram is required
require('@antv/f2/lib/geom/path'); // only the path map is required
require('@antv/f2/lib/geom/point'); // only the dot chart is required
require('@antv/f2/lib/geom/polygon'); // only the color map is required
require('@antv/f2/lib/geom/schema'); // only the box chart, stock chart are required

Coordinate

require('@antv/f2/lib/coord/polar'); // polar coordinate

require('@antv/f2/lib/coord/cartesian'); // Cartesian coordiante（already included in the core library）

Axis

require('@antv/f2/lib/component/axis/circle'); // Arc axis for polar coordinate

require('@antv/f2/lib/component/axis/line'); // Axes for Cartesian coordinate（already included in the core library）

Adjust

• require all types of adjust

require('@antv/f2/lib/geom/adjust/');

• require specific adjust type

require('@antv/f2/lib/geom/adjust/dodge'); // only grouped adjust is required
require('@antv/f2/lib/geom/adjust/stack'); // only stacked adjust is required

Scale

require('@antv/f2/lib/scale/time-cat'); // timeCat is required

Animation

The animation module serves as a plugin for chart, therefore you need to register the module on chart after it is loaded.

const Animation = require('@antv/f2/lib/animation/detail');
Chart.plugins.register(Animation); // Global registration，you can also just register it

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.

// Step 1: require the demanded guide componments
require('@antv/f2/lib/component/guide'); // require all guide components

// Or just require the specific guide component you want
require('@antv/f2/lib/component/guide/arc'); // only Guide.Arc is required
require('@antv/f2/lib/component/guide/html'); // only Guide.Html is required
require('@antv/f2/lib/component/guide/text'); // only Guide.Text is required
require('@antv/f2/lib/component/guide/rect'); // only Guide.Rect is required
require('@antv/f2/lib/component/guide/line'); // only Guide.Line is required
require('@antv/f2/lib/component/guide/tag'); // only Guide.Tag is required
require('@antv/f2/lib/component/guide/region-filter'); // only Guide.RegionFilter is required
require('@antv/f2/lib/component/guide/point'); // only Guide.Point is required

// Step 2: require the Guide plugin
const Guide = require('@antv/f2/lib/plugin/guide');

// Step 3： register Guide
Chart.plugins.register(Guide); // Global registration，you can also just register it

Tooltip

Tooltip also serves as an plugin for chart.

// Step 1：require tooltip
const Tooltip = require('@antv/f2/lib/plugin/tooltip');
// Step 2：register Tooltip
Chart.plugins.register(Tooltip); // Global registration，you can also just register it

Legend

Legend also serves as an plugin for chart.

// Step 1: require Legend
const Legend = require('@antv/f2/lib/plugin/legend');
// Step 2: register Legend
Chart.plugins.register(Legend); // Global registration，you can also just register it

Interaction

• require all of the interactions

require('@antv/f2/lib/interaction/');

• require the specific interaction

require('@antv/f2/lib/interaction/pie-select'); // selection for pie chart

require('@antv/f2/lib/interaction/interval-select');  // selection for bar chart

require('@antv/f2/lib/interaction/pan'); // chart pan

require('@antv/f2/lib/interaction/pinch'); // chart pinch

ScrollBar

ScrollBar also serves as an plugin for chart.

const ScrollBar = require('@sntv/f2/lib/plugin/scroll-bar');
F2.Chart.plugins.register(ScrollBar);

Example

If you only need to draw a pie chart without animation:

const F2 = require('@antv/f2/lib/core'); // must be required
require('@antv/f2/lib/geom/interval'); // require interval geometry
require('@antv/f2/lib/coord/polar'); // require polar coordinate
require('@antv/f2/lib/geom/adjust/stack'); // requre the type of data adjust

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:

# Go to the root directory of the F2 project and run:
$ npm run bundler

In the interface that appears, check the required module, and finally package and download it.