npm package NPM downloads Percentage of issues still open
F2(Fast & Flexible),是专为移动端定制的一套开箱即用的可视化解决方案,基于图形语法理论,具有精简、高性能、易扩展的特性,适用于对性能、大小、扩展性要求严苛的场景。
在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson,为 F2 的图形语法提供了理论基础!
$ npm install @antv/f2
- ✔︎ 体验优雅:基于 AntV 完整的移动端可视化设计体系
- ✔︎ 扩展灵活:可自定义 Shape、动画,图表组件灵活可配,满足无限创意
- ✔︎ 绘制迅速:性能极致追求,针对移动设备做了大量的优化
- ✔︎ 体积小巧:在支持丰富(45+)图表的基础上保持代码量的小巧
- 多平台支持
- label 功能组件
- 更精致的动画以及丰富的图表交互
<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: 'c1', width: 375, height: 265, pixelRatio: window.devicePixelRatio }); chart.source(data); chart.interval().position('year*sales'); chart.render();
更多示例:demos。
手机扫码观看 demos
$ npm install # 跑测试用例 $ npm run test-live # 监听文件变化构建,并打开 demo 页面 $ npm run dev # 打开 demo $ npm run demos
如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。
如需提交代码,请遵从我们的贡献指南。