F2: 基于 HTML5 Canvas，开箱即用的移动端可视化解决方案

F2（Fast & Flexible），是专为移动端定制的一套开箱即用的可视化解决方案，基于图形语法理论，具有精简、高性能、易扩展的特性，适用于对性能、大小、扩展性要求严苛的场景。

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

安装

$ npm install @antv/f2

特性

• ✔︎ 体验优雅：基于 AntV 完整的移动端可视化设计体系
• ✔︎ 扩展灵活：可自定义 Shape、动画，图表组件灵活可配，满足无限创意
• ✔︎ 绘制迅速：性能极致追求，针对移动设备做了大量的优化
• ✔︎ 体积小巧：在支持丰富（45+）图表的基础上保持代码量的小巧

多端支持

• Node：https://antv.alipay.com/zh-cn/f2/3.x/tutorial/node-env.html
• 微信小程序：https://github.com/antvis/wx-f2
• 支付宝小程序：https://github.com/antvis/my-f2

文档

• 使用教程
• API
• Gallery

快速开始

<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

# 按需打包
$ npm run bundler

如何贡献

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

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

License

MIT license.