F2

An elegant, interactive and flexible charting library for mobile.

README

undefined
undefined undefined undefined npm package NPM downloads Percentage of issues still open

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README


在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson,为 F2 的图形语法提供了理论基础!


安装


  1. ``` sh
  2. $ npm install @antv/f2
  3. ```

特性


专注移动,体验优雅


- 轻量化呈现,自然反馈:在设计上我们以人为本,追求自然简单易懂,有吸引力的表达效果,让用户在碎片化的时间里更快更高效得获取图表信息。同时在可视化的操作我们追求内容和操作有机融合,符合人的自然行为反应,让交互操作更自然。


- 轻巧流畅:F2 一直致力于追求极致的性能,针对移动设备做了大量的优化,在支持丰富(50+)图表的基础上同时保持代码量的小巧(不带交互版本 gzip 压缩后 44k,带所有交互版本 56k),同时提供模块化的设计以支持动态加载,提供更优的大小。

- 多端异构:在完美支持 H5 环境的同时,同时兼容 Node.js支付宝小程序微信小程序React Native以及 Weex 端的渲染,一份代码,多设备多环境渲染。


图表丰富,组件完备


与传统的图表库不同,抛弃了特图特做的封装思路,基于强大的图形语法理论,以数据驱动,通过图形语法的组合灵活构建各类图表,目前可绘制 50+ 图表类型(当然,还可以更多),覆盖各类场景在提供基础的图表可视化能力外,我们还提供了丰富图表功能组件,满足各种功能需求。


扩展灵活,创意无限


我们在提供最佳实践的同时,还为开发者提供了灵活的扩展机制,包括 Shape、动画以及交互的自定义能力,当然还有图表样式的个性化定制,满足各种个性化的图表要求。


文档


- API

快速开始



  1. ``` html
  2. <canvas id="mountNode"></canvas>
  3. ```

  1. ``` js
  2. // F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
  3. const data = [
  4.   { genre: 'Sports', sold: 275 },
  5.   { genre: 'Strategy', sold: 115 },
  6.   { genre: 'Action', sold: 120 },
  7.   { genre: 'Shooter', sold: 350 },
  8.   { genre: 'Other', sold: 150 },
  9. ];

  10. // 获取 canvas context
  11. const context = document.getElementById('mountNode').getContext('2d');
  12. const { props } = (
  13.   <Canvas context={context} pixelRatio={window.devicePixelRatio}>
  14.     <Chart data={data}>
  15.       <Axis field="genre" />
  16.       <Axis field="sold" />
  17.       <Interval x="genre" y="sold" color="genre" />
  18.       <Tooltip />
  19.     </Chart>
  20.   </Canvas>
  21. );

  22. const canvas = new Canvas(props);
  23. canvas.render();
  24. ```

更多示例:demos

手机扫码观看 demos


本地开发


  1. ``` sh
  2. $ npm install

  3. # 先初始化 monorepo
  4. $ npm run bootstrap

  5. # 再跑测试用例
  6. $ npm run test

  7. # 监听文件变化构建并打开 demo 页面
  8. $ npm run dev

  9. # 打开某一个具体的测试用例
  10. $ npm run test-watch -- 'TestFileName'
  11. ```

如何贡献


如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

如需提交代码,请遵从我们的贡献指南

体验改进计划说明


F2 从 3.1.12(2018-06-20 发布)版本开始添加了F2.track(true)方法。 目前我们的体验改进计划已经完成,所以从 3.3.4 版本开始该方法将从 F2 中删除。 如果它给你带来麻烦,我们深表歉意。

License