AntV
Search…
F2
Introducing F2
F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects
Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.
Installation
1
$ npm install @antv/f2
Copied!
Features
Born for mobile
- Design for mobile: make data more alive and chart interactions more natural.
- Performance: small package size(version without interaction is 44k after gzip) with great rendering performance.
- Compatibility: multi-end, Multi-runtime support. Besides H5 env, F2 can also run in Node.js, Weex rendering and React Native, also 支付宝小程序 and 微信小程序
All the chart types you want
With the power of grammar of graphics, F2 supports data-driven 50+ chart types(the amount can be even more, which is depended on you) including classical charts such as line, column/bar chart, pie chart, scatter plot, gauges, etc. Additionally, F2 also provides feature-riched chart components, such as Tooltip, Legend and Guide.
Flexible and Interactive
We also provide developers with flexible extension mechanisms, including shape, animation, and interactive customization capabilities, as well as flexible styling to meet a variety of personalized charting requirements.
Links
Other libraries base on F2
Demos
Or just scan the below qrcode to see demos in mobile:
Getting Started
1
<canvas id="mountNode"></canvas>
Copied!
1
import F2 from '@antv/f2';
2
3
const data = [
4
{ year: '1951', sales: 38 },
5
{ year: '1952', sales: 52 },
6
{ year: '1956', sales: 61 },
7
{ year: '1957', sales: 145 },
8
{ year: '1958', sales: 48 },
9
{ year: '1959', sales: 38 },
10
{ year: '1960', sales: 38 },
11
{ year: '1962', sales: 38 },
12
];
13
const chart = new F2.Chart({
14
id: 'mountNode',
15
width: 375,
16
height: 265,
17
pixelRatio: window.devicePixelRatio
18
});
19
chart.source(data);
20
chart.interval().position('year*sales');
21
chart.render();
Copied!
Development
1
$ npm install
2
3
# run test case
4
$ npm run test-live
5
6
# build watching file changes and run demos
7
$ npm run dev
8
9
# run demos
10
$ npm run demos
11
12
# run pack
13
$ npm run bundler
Copied!
How to Contribute
License
Last modified 3yr ago