@antv/f2
    Overview
    Versions
    Jobs
    Chat
    Dependencies
    Contributors
    Documentation
    Alternatives
    Discussions

@antv/f2

Charts for mobile visualization.

3.4.1  •  Updated 6 months ago  •  by antvis  •  Unknown License

npm package NPM downloads Percentage of issues still open

中文 README

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

$ npm install @antv/f2

Features

Born for mobile

  • Design for mobile: make data more alive and chart interactions more natural.

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

  • ant-design-mobile-chart: Ant Design Mobile Chart based on F2. (React).
  • BizGoblin:Data visualization library based F2 and React.
  • VChart: Mobile Chart Components based on vux and F2. (Vue).
  • weex-chart: Chart components based on Weex and F2.

Demos

Chart Demos

Or just scan the below qrcode to see demos in mobile:

Getting Started

<canvas id="mountNode"></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.

Experience Improvement Program Description

Since version 3.1.12 (released on 2018-06-20), we add F2.track(true) method for our user experience improvement program. But now the program has finish, so we remove the method from F2 since version 3.3.4. We are very sorry if it has caused trouble for you.

License

MIT license.

Popularity

Weekly Downloads
3.7K
Stars
6.9K

Maintenance

Development

Last ver 6 months ago
Created 2 years ago
Last commit 3 months ago
21 hours between commits

Technology

Node version: 10.16.3
3430.6K unpacked

Compliance

License Unknown
Not OSI Approved
0 vulnerabilities

Contributors

30 contributors
Weixing Zhang
722 commits, 143 merges, 146 PRs
Works at Alipay
dxq613
Maintainer, 42 commits, 20 merges, 3 PRs
zengyue ye
40 commits, 7 merges, 6 PRs
Works at alibaba
army8735
Maintainer, 16 commits, 4 merges, 5 PRs
Works at Alipay
leungwensen
Maintainer, 17 commits, 2 merges, 5 PRs
Works at Alipay
shaozhe.ysz
9 commits

Tags

f2
charts
mobile
visualization
data visualization
canvas
2d draw
mobile visualization
interactive
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.