Fetch the repository succeeded.
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、动画以及交互的自定义能力，当然还有图表样式的个性化定制，满足各种个性化的图表要求。
<canvas id="mountNode"></canvas>
// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
// 获取 canvas context
const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
<Chart data={data}>
<Axis field="genre" />
<Axis field="sold" />
<Interval x="genre" y="sold" color="genre" />
<Tooltip />
</Chart>
</Canvas>
);
const canvas = new Canvas(props);
canvas.render();
更多示例：demos。
手机扫码观看 demos
$ npm install
# 先初始化 monorepo
$ npm run bootstrap
# 再跑测试用例
$ npm run test
# 监听文件变化构建，并打开 demo 页面
$ npm run dev
# 打开某一个具体的测试用例
$ npm run test-watch -- 'TestFileName'
如果您在使用的过程中碰到问题，可以先通过 issues 看看有没有类似的 bug 或者建议。
如需提交代码，请遵从我们的贡献指南。
F2 从 3.1.12（2018-06-20 发布）版本开始添加了F2.track（true）方法。 目前我们的体验改进计划已经完成，所以从 3.3.4 版本开始该方法将从 F2 中删除。 如果它给你带来麻烦，我们深表歉意。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. Open source ecosystem
2. Collaboration, People, Software
3. Evaluation model
马建仓 AI 助手