description
Introduction to F2

F2

F2 is a powerful mobile data visualization solution, pure in javascript. F2 is based on the grammar of graphics, and it is light-weighted, high-performance and easily expandable. Also, F2 charts are well designed for mobile.

TODO: website and demos' page

TODO: show some charts images here

Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

Features

Elegant user experience: Designed for mobile experience
Flexible: Customizable shapes and animations, flexible charting components, infinite creativity
High performance: F2 pursues the ultimate performance for drawing, lots of optimization have been done for mobile devices
Light-weighed: F2 maintains a compact code size while supporting more than 45 kinds of charts

Other runtime support

F2 on Node.js ：https://antv.alipay.com/zh-cn/f2/3.x/tutorial/node-env.html
TODO: other runtime

Installation

$ npm install @antv/f2

Getting Started

<canvas id="c1"></canvas>

import F2 from '@antv/f2';

const data = [
  { year: '1951', sales: 38 },
  { year: '1952', sales: 52 },
  { year: '1956', sales: 61 },
  { year: '1957', sales: 145 },
  { year: '1958', sales: 48 },
  { year: '1959', sales: 38 },
  { year: '1960', sales: 38 },
  { year: '1962', sales: 38 },
];
const chart = new F2.Chart({
  id: 'mountNode',
  width: 375,
  height: 265,
  pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.interval().position('year*sales');
chart.render();

Development

$ npm install

# run test case
$ npm run test-live

# build watching file changes and run demos
$ npm run dev

# run demos
$ npm run demos

# run pack
$ npm run bundler

How to Contribute

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.

License

MIT license.

Zach41/F2-DOCS