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

2018-04-15 admin

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 动画

感谢

从 3.0 到 3.1,F2 可以说是经历了一次蜕变,非常感谢这期间与我们协同共创,鼎力支持的各产品、兄弟团队(排名不分先后):

通往『开箱即用的』移动端『可视化解决方案』还有很长的路,这只是刚刚迈出去的第一步,但方向对了,就不怕路远,期待未来与你一路同行,如果亲爱的你对 F2 有任何意见、想法或者兴趣,非常期待您能于我们联系,更欢迎投递简历: antv@antfin.com,we are waiting for you!

最后

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

antv.alipay.com/zh-cn/f2/3.… (二维码自动识别)

其他联系方式:

qr.dingtalk.com/action/join… (二维码自动识别)

原文链接:https://zhuanlan.zhihu.com/p/35209259

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-27604.html

文章标题:F2 3.1 发布,开箱即用的移动端可视化解决方案

相关文章
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
回到顶部