Skip to content
master
Switch branches/tags
Code

Latest commit

 - @antv/f2@4.0.18
 - @antv/f2-graphic@0.0.4
 - @antv/f2-my@4.0.18
 - @antv/f2-react@4.0.18
 - @antv/f2-site@4.0.18
 - @antv/f2-wx@4.0.18
dc72ba5

Git stats

Files

Permalink
Failed to load latest commit information.

npm package NPM downloads Percentage of issues still open

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="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.