F2，一个专注于移动，开ç?±å³ç”¨çš„可视化解决方案，å?Œç¾Žæ”¯æŒ H5 环境同时兼å?¹å¤šç§çŽ¯å¢ƒï¼ˆnode, 小程序，weex）。å?Œå¤‡çš„图形语法理è?ºï¼Œæ»¡è¶³ä½ çš„各种可视化需求。专业的移动è?¾è?¡æŒ‡å¼•ä¸ºä½ å¸¦æ¥æœ€ä½³çš„移动端图表体验。英文 README

在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson，为 F2 的图形语法提供了理è?ºåŸºç¡€ï¼

�装

$ npm install @antv/f2

特性

专注移动，体验优雅

• 轻量化呈现，自然反馈：在è?¾è?¡ä¸Šæˆ‘们以人为本，追求自然ç?€å•æ˜“懂，有吸引力的表达效果，è?©ç”¨æˆ·åœ¨ç¢Žç‰‡åŒ–的时间里更快更高效得获取图表信息。同时在可视化的操作我们追求内å?¹å’Œæ“ä½œæœ‰æœºèžåˆï¼Œç¬¦åˆäººçš„自然行为反应，è?©äº¤äº’操作更自然。

• 轻巧流畅：F2 一直致力于追求极致的性能，针对移动è?¾å¤‡åšäº†å¤§é‡çš„优化，在支持丰富（50+）图表的基础上同时保持代码量的小巧（不带交互版本 gzip 压缩后 44k，带所有交互版本 56k），同时提供模块化的è?¾è?¡ä»¥æ”¯æŒåŠ¨æ€åŠ è½½ï¼Œæä¾›æ›´ä¼˜çš„大小。

• 多端异构：在å?Œç¾Žæ”¯æŒ H5 环境的同时，同时兼å?¹ Node.js，支付å?å°ç¨‹åºã€å¾?信小程序、React Native以及 Weex 端的渲染，一份代码，多è?¾å¤‡å¤šçŽ¯å¢ƒæ¸²æŸ“。

图表丰富，组件å?Œå¤‡

与传统的图表库不同，抛弃了特图特做的封装思路，基于强大的图形语法理è?ºï¼Œä»¥æ•°æ?驱动，通过图形语法的组合灵活构建各类图表，ç›?前可绘制 50+ 图表类型（当然，还可以更多），覆盖各类场景 在提供基础的图表可视化能力外，我们还提供了丰富图表功能组件，满足各种功能需求。

扩展灵活，创意无限

我们在提供最佳å?žè·µçš„同时，还为开发者提供了灵活的扩展机制，包括 Shape、动画以及交互的自å?šä¹‰èƒ½åŠ›ï¼Œå½“然还有图表样式的个性化å?šåˆ¶ï¼Œæ»¡è¶³å„种个性化的图表要求。

文档

• 使用教程
• API
• 图表示例

快速开始

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

# 再跑测试用例
$ npm run test-live

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

# 打开 demo
$ npm run demos

# 按需打包
$ npm run bundler

如何贡çŒ?

如果您在使用的过程中碰到é—?题，可以先通过 issues 看看有没有类似的 bug 或者建è??。

如需提交代码，请遵从我们的贡çŒ?指南。

体验改进è?¡åˆ’说明

F2 从 3.1.12（2018-06-20发布）版本开始添加了F2.track（true）方法。 ç›?前我们的体验改进è?¡åˆ’已经å?Œæˆï¼Œæ‰€ä»¥ä»Ž 3.3.4 版本开始该方法将从 F2 中删除。 如果å?ƒç»™ä½ å¸¦æ¥éº»çƒ¦ï¼Œæˆ‘们深表歉意。

License

MIT license.