{"id":13431850,"url":"https://github.com/antvis/F2","last_synced_at":"2025-03-16T22:32:23.469Z","repository":{"id":37444733,"uuid":"66817370","full_name":"antvis/F2","owner":"antvis","description":"📱📈An elegant, interactive and flexible charting library for mobile.","archived":false,"fork":false,"pushed_at":"2024-10-16T04:42:48.000Z","size":152041,"stargazers_count":7888,"open_issues_count":283,"forks_count":649,"subscribers_count":156,"default_branch":"master","last_synced_at":"2024-10-29T21:05:30.189Z","etag":null,"topics":["antv","charts","data-visualisation","data-visualization","f2","grammar","html5-canvas","mobile","visualization"],"latest_commit_sha":null,"homepage":"https://f2.antv.vision/zh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antvis.png","metadata":{"files":{"readme":"README.en-US.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-29T06:26:23.000Z","updated_at":"2024-10-29T15:29:15.000Z","dependencies_parsed_at":"2023-09-29T03:36:50.851Z","dependency_job_id":"41676939-255d-45f9-b7c6-5c77952b1c02","html_url":"https://github.com/antvis/F2","commit_stats":{"total_commits":1958,"total_committers":79,"mean_commits":24.78481012658228,"dds":0.6475995914198162,"last_synced_commit":"6d939545ef542375bb51d0307bbb378b7e09bf4f"},"previous_names":["antvis/g2-mobile"],"tags_count":512,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/F2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713416,"owners_count":20335567,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antv","charts","data-visualisation","data-visualization","f2","grammar","html5-canvas","mobile","visualization"],"created_at":"2024-07-31T02:01:06.456Z","updated_at":"2025-03-16T22:32:23.433Z","avatar_url":"https://github.com/antvis.png","language":"JavaScript","readme":"![](https://user-images.githubusercontent.com/6628666/44565549-4ab5d480-a79b-11e8-8d75-11420845efc0.png)\n\n[![](https://img.shields.io/travis/antvis/f2.svg)](https://travis-ci.org/antvis/f2) ![](https://img.shields.io/badge/language-javascript-red.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/f2.svg)](https://www.npmjs.com/package/@antv/f2) [![NPM downloads](http://img.shields.io/npm/dm/@antv/f2.svg)](https://npmjs.org/package/@antv/f2) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/f2.svg)](http://isitmaintained.com/project/antvis/f2 'Percentage of issues still open')\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Introducing%20F2,%20an%20elegant,%20interactive%20and%20flexible%20charting%20library%20for%20mobile.\u0026url=https://medium.com/@SimaZwx/https-medium-com-simazwx-introducing-f2-c44fb4e74c2d\u0026hashtags=javascript,mobile,charts,dataviz,visualization,F2\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\"\u003e \u003c/a\u003e\n\u003c/p\u003e\n\n[中文 README](./README.md)\n\nF2 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](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html), F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects.\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://f2.antv.vision/en/examples\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6628666/44565498-f4e12c80-a79a-11e8-98fc-73ee58547dc9.png\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003e Special thanks to [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson), the author of [_The Grammar Of Graphics_](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html), whose book served as the foundation for F2 and G2.\n\n## Installation\n\n```bash\n$ npm install @antv/f2\n```\n\n## Features\n\n### Born for mobile\n\n- **Design for mobile**: make data more alive and chart interactions more natural.\n\n  \u003cp align=\"left\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6628666/44565525-21954400-a79b-11e8-8d69-cd95fa6b9a99.gif\" width=\"600\"\u003e\u003c/p\u003e\n  \u003cp align=\"left\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6628666/44565524-21954400-a79b-11e8-9aea-9e38d458e37b.gif\" width=\"600\" \u003e\u003c/p\u003e\n\n- **Performance**: small package size(version without interaction is 44k after gzip) with great rendering performance.\n\n- **Compatibility**: multi-end, Multi-runtime support. Besides H5 env, F2 can also run in [Node.js](https://antv.gitbook.io/f2/platform), [Weex rendering](https://github.com/weex-plugins/weex-chart) and [React Native](https://github.com/chenshuai2144/f2-demo), also [支付宝小程序](https://github.com/antvis/my-f2) and [微信小程序](https://github.com/antvis/wx-f2).\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://gw.alipayobjects.com/zos/rmsportal/cPUduuYgROeJwRJSRuFK.png\"\u003e\u003c/p\u003e\n\n### All the chart types you want\n\nWith the power of grammar of graphics, F2 supports data-driven [50+ chart types](https://f2.antv.vision/zh/examples)(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.\n\n### Flexible and Interactive\n\nWe 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.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/6628666/44565579-6c16c080-a79b-11e8-9494-86f3ad477341.gif\" width=\"200\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6628666/44565581-6c16c080-a79b-11e8-8210-f4e797480e87.gif\" width=\"200\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6628666/44565580-6c16c080-a79b-11e8-956d-4d15455468a3.gif\" width=\"200\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6628666/44565583-6caf5700-a79b-11e8-8e9e-a1fa12ddcbf1.gif\" width=\"200\"\u003e\n\n## Links\n\n- [Website](https://f2.antv.vision/)\n- English documents: https://f2.antv.vision/en\n- Chart demos: https://f2.antv.vision/en/examples\n- 中文文档: https://f2.antv.vision/zh\n\n## Other libraries base on F2\n\n- [ant-design-mobile-chart](https://github.com/ant-design/ant-design-mobile-chart): Ant Design Mobile Chart based on F2. (React).\n- [BizGoblin](https://github.com/alibaba/BizGoblin)：Data visualization library based F2 and React.\n- [VChart](https://doc.vux.li/zh-CN/components/v-chart.html): Mobile Chart Components based on vux and F2. (Vue).\n- [weex-chart](https://github.com/weex-plugins/weex-chart): Chart components based on Weex and F2.\n\n## Demos\n\n[Chart Demos](https://f2.antv.vision/en/examples)\n\n**Or just scan the below qrcode to see demos in mobile:**\n\n\u003cimg src=\"https://gw.alipayobjects.com/zos/rmsportal/nzlxIzUBlBRVGMyaZigG.png\" style=\"width:150px;\"\u003e\n\n## Getting Started\n\n\u003cimg src=\"https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/54ad3af8-c30d-43ca-b0e8-e21c4ea3d438.png\" width=\"375\"\u003e\n\n```html\n\u003ccanvas id=\"mountNode\"\u003e\u003c/canvas\u003e\n```\n\n```js\n// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。\nconst data = [\n  { genre: 'Sports', sold: 275 },\n  { genre: 'Strategy', sold: 115 },\n  { genre: 'Action', sold: 120 },\n  { genre: 'Shooter', sold: 350 },\n  { genre: 'Other', sold: 150 },\n];\n\n// 获取 canvas context\nconst context = document.getElementById('mountNode').getContext('2d');\nconst { props } = (\n  \u003cCanvas context={context} pixelRatio={window.devicePixelRatio}\u003e\n    \u003cChart data={data}\u003e\n      \u003cAxis field=\"genre\" /\u003e\n      \u003cAxis field=\"sold\" /\u003e\n      \u003cInterval x=\"genre\" y=\"sold\" color=\"genre\" /\u003e\n      \u003cTooltip /\u003e\n    \u003c/Chart\u003e\n  \u003c/Canvas\u003e\n);\n\nconst canvas = new Canvas(props);\ncanvas.render();\n```\n\n## Development\n\n```bash\n$ npm install\n\n# setup\n$ npm run bootstrap\n\n# run test case\n$ npm run test-watch\n```\n\n## How to Contribute\n\nPlease let us know how can we help. Do check out [issues](https://github.com/antvis/f2/issues) for bug reports or suggestions first.\n\nTo become a contributor, please follow our [contributing guide](https://github.com/antvis/f2/blob/master/CONTRIBUTING.md).\n\n## Experience Improvement Program Description\n\nSince 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.\n\n## License\n\n[MIT license](./LICENSE).\n","funding_links":[],"categories":["JavaScript","TypeScript","Uncategorized","Projects List","React Native"],"sub_categories":["Uncategorized","React"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2FF2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2FF2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2FF2/lists"}