F2 3.6, 更快 & 更强的 F2

导读

F2 从诞生之初就转为移动端而定制，我们专注于移动端，并为移动端带来高性能、高扩展且能开箱即用的移动端图表，我们也一直朝这个方向在努力，这次 3.6 的升级，我们不仅在性能上做了很多优化的调整，还对底层架构做了一系列的调整，能在真正意义上做到一份代码多端运行。

更灵敏的手势交互

在 F2 3.6 里，我们对缩放和平移进行了整体的重构，去掉了原先 hammerjs 的依赖，在内部实现了如缩放，平移等手势动作，第一减轻了 hammerjs 带来的体积压力，第二让手势多端，尤其是小程序的支持成为了现实

表现更快的F2

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

还是上面的示例，下图是在 iphone 7p 上跑的数据，整体 2200 条数据点，每次绘制的耗时平均在 13ms ，满帧跑基本没压力，而且在低端机型上，提升更是明显

小程序上的复杂手势

前面也提到，F2 的定位就是移动端，而小程序是移动端一个重要场景，所以小程序也是我们的重要场景，在 3.6 里，我们对 F2 底层的 dom 事件机制进行了整体的优化和调整，去掉了只能在web上跑的一些实现，只保留了和端特性无关的实现，不仅能在 web 上支持复杂手势交互，还支持小程序，react native，weex， 甚至是 Nodejs 端的手势响应

你可以完全使用相同的代码，在各种不同的端上绘制图表

...
chart.line()
  .position('reportDateTimestamp*rate');
// 双指缩放
chart.interaction('pinch');
// 单指平移
chart.interaction('pan');
chart.render();
...

ps：小程序应用因为小程序本身架构的设计原因，整体性能表现会比 h5 web 上慢很多，尤其是在数据点相对比较多的时候

其他环境下的F2

我们的目标是移动端，移动端也不仅仅是 H5 和小程序，还有 native，当然也包括 react native 和 weex，我们后面会提供整一套 native 下的图表解决方案，让你在 native 上也能用 F2 轻松实现可视化图表，让你实现一份代码全端运行！
**

React Native 下的 F2

React Native + GCanvas https://github.com/alibaba/GCanvas

关于未来

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

如何升级

讲了这么多，当然如何升级也是很重要的，这次的 3.6 版本是全兼容升级，你可以放心升级，当然如果有问题，请通过后面的任意渠道联系我们，或者直接给我们提PR

最后

非常感谢你的阅读，如果你对F2感兴趣，别忘记了关注和start我们，也欢迎随时你的交流

• 官网： https://f2.antv.vision/zh
• github： https://github.com/antvis/F2
• 支付宝小程序版：https://github.com/antvis/my-f2
• 微信小程序版：https://github.com/antvis/wx-f2
• 钉钉群: