AntV-F2 3.1 发布,开箱即用的移动端可视化解决方案 - 开源中国社区
Float_left Icon_close
AntV-F2 3.1 发布,开箱即用的移动端可视化解决方案
AntV 2018年04月02日

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

AntV AntV 发布于2018年04月02日 收藏 65

【腾讯云】0基础建站 网站模板9元起! >>>  

F2,源于 Fast & Flexible 两个单词首字母,是 AntV 家族中专为移动端定制、开箱即用的可视化解决方案。

过往

或许大家对我比较陌生,但是从 AntV 上线的那一天起我就已经出道了,那时候我有另外一个名字『G2-mobile』,我和 G2 师承一脉,尽得『图形语法』真传,主要用于满足对代码体积以及渲染性能要求严苛的移动端图表需求。

然而本以精简、高性能、高扩展为傲的我,仍然敌不过这个颜值即正义的时代。移动端的可视化图表重于表达,更追求鲜活生动,要满足这个需求,对于我的早期使用者们可以说是『开局一把刀,装备全靠自己造』......由于缺少完整的移动端设计体系和功能支持,多数设计师的创意都只能被阉割,我也只能默默的背上重重的大锅。


现在回想起来当初可谓是初生牛犊不怕虎,全靠一生硬气支撑移动端各种图表需求...

如今需求江湖变幻莫测,我越来越觉得单凭一己之力很难继续笑傲江湖,于是我访寻各大业务方,协同共创提升可视化体验的同时,沉淀精华,并潜心研究移动端可视化图表的设计心法,期望融会贯通,造福各类帮派移动产品。


F2 3.1,焕然一新

哐~~~ 晴天一声巨响,经过将近九九八十一天潜心修炼,现在我正式以『F2』为名向大家自荐,我将以 Fast & Flexible 为行事准则,力求将自己打造成一套『开箱即用的移动端可视化解决方案』。

全新的 2D 绘图引擎

F2 3.1 版本之前底层直接采用原生 Canvas 绘制,虽然在性能上占据优势,但是过于底层,api 粗糙,加上即时绘制无状态无对象特性,使得它内部的图形不支持动画更不支持任何交互事件。于是在 3.1 版本我们引入了全新的绘图引擎,它具备:

  • 层次化结构 

  • 支持容器、各种图形的创建、修改和销毁 

  • 动画 

  • 矩阵变换

在保证性能的同时也为打开了可交互的大门,开发同学们也可以更容易得创建 shape,有了它,你可以这样,这样,这样!


更多内容详见:G 绘图接口

插件机制,更好扩展图表功能

如何在增强图表功能的同时,不带来过大的体积变化,同时提供给用户选择和扩展的能力?插件机制!

在 3.1 版本中 F2 引入了插件机制,用于扩展图表的功能,该机制可以帮助用户在图表创建的各个阶段定制或更改图表的默认行为,下面提到的 legend、guide、tooltip 以及动画(群组以及精细动画两个版本)都是基于插件机制实现。

更多内容详见:Plugin 插件

更灵活的按需引入机制

F2 应用于移动端,对代码的体量大小非常重视,F2 提供按需引入机制,满足用户只加载需要的功能代码,以减少多余的引入。相对于 F2 3.0,3.1 版本的按需引入机制更细粒度,将坐标系类型、坐标轴类型、guide 类型也进行了拆分,同时移除了之前对于引入顺序的依赖,更加灵活。

以下是 F2 同 d3chart.jsHighchartsechartsg2 的体积大小对比图:


更多内容详见:按需引用

完整的移动端设计体系支撑

在 G2 开发过程中,我们初步拥有了体系化的 AntV 设计原则,而随着移动端用户需求研究深入、越来越丰富的应用场景积累, 我们为这个体系升级扩充了一套适合移动端的设计方法体系,并以此为指引重构了整个 F2 的可视化组件(详情可见下文关于组件、动画、和样式的介绍)。

有态度的图表功能组件

亲爱的们,现在可以把之前为实现 tooltip、legend 辛苦写的代码全部删除了!新版 F2 3.1 为大家带来了全新的基于插件机制的 Tooltip、Legend、Guide 图表功能组件:


为何称之为有态度?因为我们发现对于移动端界面小,内容组织以及排版多采用纵向布局的特点,传统的 tooltip 交互方式以及图例排布并不适用于移动端,以 tooltip 为例,如果还按照 PC 端的方式就会出现 tooltip 被滑动的拇指遮挡的问题。


虽然可以在技术上将这个问题规避,但是为什么不直接从设计和行为交互上进行改进?于是我们总结沉淀出了如下适用于移动端的交互方式,同时技术上还提供了灵活的配置和自定义机制:


更多内容详见:Legend 图例Tooltip 提示信息Guide 辅助元素

生动的动画

生动、有节奏的动画对于图表而言,可以起到重要的视觉引导作用,和提升趣味性。

全新的 F2 3.1 版本中,提供了两种类型的动画: 1. 整体动画,即图表入场动画,适用于图表仅加载一次,之后不再会发生数据变更的情况。 2. 精细动画,包含入场、更新以及离场动画,同时还提供了自定义动画机制,适用于图表数据会发生更新并且对动画要求更高的场景。

因为动画也基于插件机制实现,所以用户可以根据自身需要决定具体引入哪种类型的动画。

更多内容详见:Animation 动画

最后

看到这里,想必您肯定对我产生兴趣了,下面为您呈上一些资料:

其他联系方式:

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 开源中国社区 [http://www.oschina.net]
本文标题:AntV-F2 3.1 发布,开箱即用的移动端可视化解决方案
分享
评论(23)
精彩评论
10
比不过功能就比谁更小
4
感觉没echart的牛B
2

引用来自“魈小沐”的评论

感觉没echart的牛B
你可能不知道内情,我查过资料。这个是林峰(echarts)创始人去阿里巴巴做的一个可视化产品。
最新评论
0
希望能支持ReactNative啊:smile:
0
echarts也是支持移动端的吧?
0
就是图表(数据可视化展现),而不是应用的可视化开发。。。。。
0
特意查过这种人的路径,好跟着学。
0
有人比功能,有人比性能,只见流氓比大小
0
get新技能
0
我晕。用手机浏览器扫二维码之后 进入 DEMO, 打开页面居然看不到图。阿里,你是来搞笑的吗???
0

引用来自“魈小沐”的评论

感觉没echart的牛B

引用来自“yuzhouliu”的评论

这玩意看似牛逼,就是把图片做的好看,会营销,绝对没echart牛B

引用来自“长沙大东家”的评论

你可能不知道内情,我查过资料。这个是林峰(echarts)创始人去阿里巴巴做的一个可视化产品。
你消息挺灵通的嘛 : )
0

引用来自“魈小沐”的评论

感觉没echart的牛B

引用来自“yuzhouliu”的评论

这玩意看似牛逼,就是把图片做的好看,会营销,绝对没echart牛B

引用来自“长沙大东家”的评论

你可能不知道内情,我查过资料。这个是林峰(echarts)创始人去阿里巴巴做的一个可视化产品。
还真不知道
0

引用来自“魈小沐”的评论

感觉没echart的牛B

引用来自“yuzhouliu”的评论

这玩意看似牛逼,就是把图片做的好看,会营销,绝对没echart牛B
你可能不知道内情,我查过资料。这个是林峰(echarts)创始人去阿里巴巴做的一个可视化产品。
0

引用来自“世尘悉洞”的评论

UI很清新,不错。不知道跟百度的echart有啥优势。有时间研究研究
同一个创始人林峰
2

引用来自“魈小沐”的评论

感觉没echart的牛B
你可能不知道内情,我查过资料。这个是林峰(echarts)创始人去阿里巴巴做的一个可视化产品。
0
g2-mobile过来的用户泪流满面:sob:
0

引用来自“魈小沐”的评论

感觉没echart的牛B
这玩意看似牛逼,就是把图片做的好看,会营销,绝对没echart牛B
0
示例太少了,像百度的echart那样弄多些示例用起来才方便
0
哇,看起来好高端啊
4
感觉没echart的牛B
0
原来是支付宝的,好牛逼
0
厉害了
0
兼容IE8?:flushed:
顶部