AntV - F2 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
AntV - F2 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
AntV - F2 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 程序开发UI组件库
开源组织 阿里巴巴
地区 国产
投 递 者 局长
适用人群 未知
收录时间 2017-11-22

软件简介

F2 是面向移动端的一套基于可视化图形语法的图表库,具有精简、高性能、易扩展的特性。适用于对性能、大小、扩展性要求严苛的场景。

特性

  • 极小:在提供了几十种图表的基础上,压缩后代码不足 70k,全部大小 100k

  • 高性能:极致优化贴近原生 canvas 的性能

  • 高扩展性:可以非常容易的实现个性化的图表

安装

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源:

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.5/f2/3.0.0/f2.min.js"></script>
<!-- 引入本地脚本 -->
<script src="./f2.js"></script>

通过 npm 安装

官方提供了 F2 npm 包,通过下面的命令即可完成安装

npm install @antv/f2 --save

成功安装完成之后,即可使用 import 或 require 进行引用。

const F2 = require('@antv/f2');

开始使用

在 F2 引入页面后,我们就已经做好了创建第一个图表的准备了。

下面是以一个基础的柱状图为例开始我们的第一个图表创建。

浏览器引入方式

1. 创建 canvas 标签

在页面上创建一个 canvas 并指定 id

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

2. 编写图表绘制代码

创建 canvas 标签后,我们就可以进行简单的图表绘制:

  1. 创建 Chart 图表对象,指定图表 ID、指定图表的宽高、边距等信息;

  2. 载入图表数据源;

  3. 使用图形语法进行图表的绘制;

  4. 渲染图表。

// 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 },
];

// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
  id: 'c1', // 指定图表容器 ID
  width: 500, // 指定图表宽度
  height: 300 // 指定图表高度    
});

// Step 2: 载入数据源
chart.source(data);

// Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre');

// Step 4: 渲染图表
chart.render();

完成上述两步之后,保存文件并用浏览器打开,一张柱状图就绘制成功了:

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
发表于大前端专区
2020/03/20 10:05

蚂蚁金服 AntV F2 3.6 发布,更强!更快!

F2 3.6 发布,更强!更快! 导读 F2,为移动端而生的可视化图表引擎。从 3.1 全新版本发布以来,我们一直朝着提供高性能,高扩展,开箱即用的生动图表的方向努力,同时面对移动端多样的环境,多端适配也一直是我们在努力追求的目标。这次 3.6 的升级,我们不仅在性能上取得了突破性的提升,同时在多端适配上,做到了真正意义上的一份代码多端运行。 特性预览 💪更强 手势交互 在 F2 3.6 里,我们对缩放和平移进行了整体的...

3
30
发表于大前端专区
2018/08/28 11:48

蚂蚁金服移动端可视化解决方案 F2 3.2 正式发布

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。 特性 专注移动,体验优雅 在“准确、有效、清晰、美”的可视化原则的基础之上,结合移动设备特性(规格不一,计算能力不足和触摸界面)以及人们对移动设备的使用习惯,我们从设计、性能以及多端异构三个角度出发,为用...

11
85
发表于大前端专区
2018/04/02 21:21

AntV-F2 3.1 发布,开箱即用的移动端可视化解决方案

F2,源于 Fast & Flexible 两个单词首字母,是 AntV 家族中专为移动端定制、开箱即用的可视化解决方案。 过往 或许大家对我比较陌生,但是从 AntV 上线的那一天起我就已经出道了,那时候我有另外一个名字『G2-mobile』,我和 G2 师承一脉,尽得『图形语法』真传,主要用于满足对代码体积以及渲染性能要求严苛的移动端图表需求。 然而本以精简、高性能、高扩展为傲的我,仍然敌不过这个颜值即正义的时代。移动端的可视化图表重于...

23
65
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
0 评论
103 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部