antvis/f2

Name: f2

Owner: AntV team

Description: ? ? ? Charts for mobile visualization

Created: 2016-08-29 06:26:23.0

Updated: 2018-05-24 10:51:03.0

Pushed: 2018-05-24 15:49:22.0

Homepage: https://antv.alipay.com/zh-cn/f2/3.x/index.html

Size: 10058

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

F2: Mobile data visualization solution, pure in JavaScript

?? README

F2 is a out-of-box visualization solution tailored to the mobile devices. F2 is based on the grammar of graphics, and it is light-weighted, high-performance and easily expandable. F2 is designed for harsh scenarios where performance, size and scalability is extremely high demand.

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

Installation

m install @antv/f2

Features

• ?? Elegant user experience: Designed for mobile experience
• ?? Flexible: Customizable shapes and animations, flexible charting components, infinite creativity
• ?? High performance: F2 pursues the utltimate 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

• F2 on Node.js ?https://antv.alipay.com/zh-cn/f2/3.x/tutorial/node-env.html
• F2 on WebChart miniprogram: https://github.com/antvis/wx-f2
• F2 on Ant miniprogram: https://github.com/antvis/my-f2

Website && Documentations

• Website

• Chinese documents

• Tutorials

• API

• English documents: on the way!

Demos

• Chart Demos
• Gallery

Or see demos in mobile:

Getting Started

vas id="c1"></canvas>

s
rt F2 from '@antv/f2';

t 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 },

t chart = new F2.Chart({
: 'c1',
dth: 375,
ight: 265,
xelRatio: window.devicePixelRatio


t.source(data);
t.interval().position('year*sales');
t.render();

Development

m install

n test case
m run test-live

ild watching file changes and run demos
m run dev

n demos
m run demos

n pack
m 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.