posuihushui / f2

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

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

F2（Fast && Flexible），是一套面向移动端的基于可视化图形语法的解决方案，具有精简、高性能、易扩展的特性，适用于对性能、大小、扩展性要求很高的场景。

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

安装

$ npm install @antv/f2

特性

• ✔︎ 灵活且易扩展：灵活的按需引入机制，并提供自定义 Shape 以及动画机制，基于图形语法灵活绘制图表，满足你无限的创意
• ✔︎ 高性能：性能极致追求，针对移动设备做了大量的优化
• ✔︎ 精简：精简版（简单折柱饼）压缩后不到 100k，完整版本压缩后 152k
• ✔︎ 丰富的图表类型：支持 20+ 图表类型

正在建设中

• 动画支持
• 丰富交互功能
• 多平台支持

文档

• 文档地址：https://antvis.github.io/f2/，所以内容位于 doc 目录下
• 3.0 版本的文档，可访问 AntV 官网：F2。

快速开始

<canvas id="c1"></canvas>

import F2 from '@antv/f2';

const data = [ 
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

const chart = new F2.Chart({
  id: 'c1',
  width: 500,
  height: 300  
});

chart.source(data);
chart.interval().position('genre*sold').color('genre');
chart.render();

更多示例：demos。

本地开发

$ npm install

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

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

# 打开 demo
$ npm run demos

如何贡献

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

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

License

MIT license.