@antv/f2 NPM | npm.io

npm.io

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.
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.

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>

// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 获取 canvas context
const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

const canvas = new Canvas(props);
await canvas.render();

Development

$ npm install

# setup
$ npm run bootstrap

# run test case
$ npm run test-watch

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.

antv f2 chart charts mobile visualization data visualization canvas 2d draw mobile visualization interactive

@antv/event-emitter @antv/f-engine @antv/f-lottie @antv/util @babel/runtime d3-cloud fecha gl-matrix tslib type-fest

custom-slidebar hae-test custom-development cloud-computer-component access-h5-components abm-h5-components vuxs my-f2 vue-components-demo dxf-vux @infinitebrahmanuniverse/nolb-_antv @everything-registry/sub-chunk-70 @hhm1999/vue-components-mobile @gulibs/wx-f2 @h3n5/vux @h3n5/vux-cli3 @haloe/mobile-pro @lq-viser/viser-cell @minix-iot/mui @minix-iot/ui @mjcloud/platform-types @hedou/antv-f2 ued-crm-gas tt-f2 vf2-plus ux-angular upanapp uplanapp ux-react ux-vue ztui ztui2 wvux wx-suoqiu ws-vux wx-f2 wx-f2-ly wx-f2-v2 xf-vux xl-mviews ya-ui-vue zbf-vux viser-cell vue-hero-ui vue-huangks vue-slidebar-ssp vue-stone vue-mcharts vux-logwire vux-lvya vux-plus vux-popup vux-test vux-wangsheng vux-wb vux-wechat-1.4 vux-zkrt vux vux-bake vux-fix vux-fork-zlt vux-hj vux-hrfax vuxcopy vuxfordysj yihan-test-vux yihan-vux yihanvuxtest yto-vux yuansu miss-ui mall-common lyc-taro3-f2 @teld/component-proxy nacl-ui @wibetter/ui-schema-editor neap-core2 native-f2charts dysjvux newhope-core dub-ui nbugs-mobile-chart nbigdatas @ray-js/chart @react-native-web-charts/f2 @kqinfo/ui ngx-f2 mini-elements @tuya-materials/tuya-miniapp-explorer-template ngx-antv-f2 ng-f2 ep-water-wx mb-vux @tarojsx/library lwj-business-frontend lwj-editor antd-mobile-vue antd-mobile-vue-next ontheway-vux op-h5

28 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

6 months ago

6 months ago

8 months ago

8 months ago

10 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

@antv/f2 v5.4.5

Installation

Features

Born for mobile

All the chart types you want

Flexible and Interactive

Links

Other libraries base on F2

Demos

Getting Started

Development

How to Contribute

Experience Improvement Program Description

License