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

栏目: 软件资讯 · 发布时间: 4年前

内容简介:F2 3.6 发布,更强!更快! 导读 F2,为移动端而生的可视化图表引擎。从 3.1 全新版本发布以来,我们一直朝着提供高性能,高扩展,开箱即用的生动图表的方向努力,同时面对移动端多样的环境,多端适配也一直是我们...

F2 3.6 发布,更强!更快!

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

导读

F2,为移动端而生的可视化图表引擎。从 3.1 全新版本发布以来,我们一直朝着提供高性能,高扩展,开箱即用的生动图表的方向努力,同时面对移动端多样的环境,多端适配也一直是我们在努力追求的目标。这次 3.6 的升级,我们不仅在性能上取得了突破性的提升,同时在多端适配上,做到了真正意义上的一份代码多端运行

特性预览

????更强

手势交互

在 F2 3.6 里,我们对缩放和平移进行了整体的重构,去掉了原先 hammerjs 对于浏览器特性的依赖,在内部实现了缩放,平移等手势动作,✨让手势完全突破端的限制,全端支持! ✨。

H5 上的手势交互

折线图 柱状图
蚂蚁金服 AntV F2 3.6 发布,更强!更快! 蚂蚁金服 AntV F2 3.6 发布,更强!更快!

小程序上的手势交互

折线图 柱状图
蚂蚁金服 AntV F2 3.6 发布,更强!更快! 蚂蚁金服 AntV F2 3.6 发布,更强!更快!

演示示例见:f2-wx-demo

React Native 上的图表及手势交互

折线图 柱状图
蚂蚁金服 AntV F2 3.6 发布,更强!更快! 蚂蚁金服 AntV F2 3.6 发布,更强!更快!

演示示例可见:f2-rn-gcanvas-demo

其他环境下的 F2

我们的目标是全端,我们后面会提供整一套 native 下的图表解决方案,让你在 native 上也能用 F2 轻松实现可视化图表,让你实现一份代码全端运行!
如果想要在Nodejs端绘制,F2也能搞定,具体实现可以参考 f2-node-demo

????更快

在复杂手势的基础上,我们对 F2 的性能进行了专项的优化,并且对内部实例的生命周期进行了更细粒度的控制,让图表二次渲染的性能得到大幅度的提升,尤其是对图表手势交互的体验有明显的提升!

各机型性能表现

下面是各个机型在渲染 2200 个数据点的对比效果:

iphone 7p 上的性能表现

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

????iphone 7p下流畅度提升明显,绘制整体绘制耗时缩短了40%,满帧跑毫无压力!

HTC M8st (低端机) 上的性能表现

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

**????**在低端机型上 3.5 几乎不可用,而 3.6 版本使用基本无问题!

代码演示

3.5 版本 3.6版本
代码示例: https://codesandbox.io/s/35-pinch-pan-i9nzz 代码示例: https://codesandbox.io/s/36-pinch-pan-0yg73
二维码预览
蚂蚁金服 AntV F2 3.6 发布,更强!更快!
二维码预览
蚂蚁金服 AntV F2 3.6 发布,更强!更快!

关于未来

正如前面 AntV 架构演进-F2 篇里提到的,F2 也将迈入 4.0 时代,F2 、G2 也将会有更多的互通,但是我们的目标还是不变,依然是为移动端带来高性能、高扩展,且能开箱即用的可视化图表解决方案,敬请期待~

如何升级

这次的 3.6 版本的主功能是全兼容升级,可以放心使用,缩放和拖拽是全新实现,且默认内置,只用把之前按需引用的方式去掉就可以体验了,当然如果有问题,请通过下面的任意渠道联系我们,或者直接给我们提 PR。

最后

非常感谢你的阅读,如果你对 F2 感兴趣,别忘记了在 GitHub 上三连(watch, star 及 fork),欢迎随时交流!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新零售(实体店O2O营销与运营实战)

新零售(实体店O2O营销与运营实战)

苗李宁 / / 化学工业 / 2018-08-01 / 58.0

一起来看看 《新零售(实体店O2O营销与运营实战)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器