可视化专家教你如何让数据栩栩如生

用户1097444

发布于 2022-06-29 16:03:28

4860

发布于 2022-06-29 16:03:28

点击阅读原文，了解更多关于《IMWeb Conf 2018 可视化与动画分会场》的信息

背景

数据可视化，数据是本质。其产生与兴起，一方面是由于人们有着对数据的各种对比、趋势、关联等等的诉求；另外一方面，人是视觉动物，对于大量的原始数据不敏感，需要有工具将数据图形化，直观地呈现出来。前端，最贴近用户的程序员，自然而然地肩负着此使命，我们都渴望着准确高效友好地把数据可视化地呈现给用户。

可视化也是一名艺术家，与前端偶遇于web动画中。我们动画常见的是基于CSS和JS的，但我们不应该只局限于此，我们需要对动画了解更多。

即将于 10月14日在 深圳举办的 IMWeb Conf 2018 中，《可视化与动画分会场》将带你踏入可视化与动画的世界。

分享主题

本次腾讯 IMWeb 团队，邀请到了业内各大公司的著名前端布道者，围绕“可视化与动画”这一主题，为您带来全新的核心理念、设计思路专场剖析。

主题有：

动静之间，数字之美──谈谈用户界面动画 - 张文婷（Adobe）
AntV-让数据栩栩如生 - 梁文森（蚂蚁金服）
大数据可视化性能优化之道 - 宿爽（百度）
腾讯 Cax 渲染引擎和 Wechart 数据可视化引擎 - 张磊（腾讯）

亲临现场，你将收获：

与前端大咖面对面交流
了解可视化与动画的发展史和最新动态
深入挖掘业界可视化框架的原理
了解方案之间的异同
认知哪种方案最适合自己业务

10月14日，我们与您不见不散！

会前问答

IMWeb Conf 2018 是诚意满满的一次前端嘉年华。为了让大家提前感受大会氛围，我们为大家准备了一次会前的讲师专访，他们是来自Adobe的张文婷，来自蚂蚁金服的梁文森和来自腾讯的张磊，让我们来看看他们对“可视化与动画”的一些看法吧。

问题1：为什么这次IMweb大会选择了交互界面动画这个议题？

张文婷：网页是交互界面的重要媒介之一。各种层出不穷的网页技术都是为了实现越来越高难度且高质量的交互界面。基于网页的交互界面可以被看作一个不断变化的二维平面。为什么强调是不断变化的呢？交互界面不可能是不变的，否则用户的交互操作就失去了意义。既然不能不变，那么这种变化应该尽量连贯流畅，而不是突然或者断断续续的。连贯流畅的变化就是动画。好的交互界面设计开发者不仅仅把设计的眼光放在各个不同页面状态上，更放在各个不同页面状态转换的间隙。间隙之中可以给用户带来清晰的交互逻辑，友好又微妙的操作提示。美妙的交互动画还可以带来强烈的品牌形象，提升产品的设计感，带来视觉享受。开发交互动画不简单。首先有很多不同的选择。我们对于不同的js框架有很多的探讨比较，他们各有所长，需要按照开发需求去选择最合适的。同样，开发交互动画也有很多不同的途径，可以利用结合各种不同的网页技术，如CSS, SVG, Canvas, JS来实现不同效果。各种不同方法各有优劣，也各有其适用的场景。如何选择，千头万绪。我希望能把这个话题通过这次演讲，为IMweb的与会者研究透彻，揭开神秘面纱，指引方向。

问题2：可视化绘图中 Canvas、SVG、WebGL 如何选择？

梁文森：这三个底层渲染技术适用的场景还是很不一样的。总体来说，二维场景下 Canvas 适合“小画布大数据量”的场景，SVG 适合“大画布小数据量”的场景，Canvas 更底层，能做的事情更多，但 SVG 同时更适合移动端，能导出矢量图文件，对开发者更友好一些。三维场景用 WebGL，并且它对开发者要求更高一些。如果单纯从性能上限考量，大体可以认为 WebGL > Canvas > SVG。

张磊：3D首选WebGL，2D选WebGL或Canvas，2D需要纯网格 mapping 动画选 WebGL，比如要支持扭曲变形的骨骼引擎，Canvas 使用 clip 三角形 + texture mapping 还是很吃力，还要解决出现缝隙的问题，WebGL则没有问题，其余场景 Canvas 和 WebGL 都可以。SVG不考虑，Canvas 和 WebGL API足够底层，SVG 能做的 WebGL 和 Canvas 都能做，WebGL 和Canvas 能做的SVG不一定能做。

问题3：开源的可视化工具浩如烟海，如何选择？

梁文森：事实上，在 github 上 charts 关键字搜索到的项目，单单 JS 技术栈也超过一万了。不过选择什么工具要看具体的需求。譬如如果有极致的动画灵活度和二次开发需求，团队可视化方面也有积累，可以用 D3；如果是常用图表需求，不需要二次封装，可以用封装程度比较高的 ECharts；如果情况介乎两者之间，不希望过多开发，也想有足够的灵活度，可以考虑基于图形语法的 G2；移动端对性能、包大小非常敏感的场景可以用 F2 等。

问题4：提前想和参会者说的话

张文婷：这次 IMweb 大会的议题安排很精彩，几个不同的分会场各有侧重，“Node 服务与性能”分会场充分挖掘 JS 作为打通前后端全栈的编程语言的潜力。”小程序快应用”紧抓热点平台，时下行业热点。“Native 跨界融合”打破网页与应用 app 的模糊界限，让网页技术更泛平台化。我最感兴趣的是我所在的“可视化与动画”分会场，演讲主题与视觉，设计，前端贴合紧密。希望到时候演讲之外与各位参会者能多多交流。非常期待！

梁文森：数据可视化越来越受关注，根本原因是业务上对数据可视化的需求越来越旺盛，并且也越来越复杂。阿里和蚂蚁金服现在面临非常多非常复杂的可视化场景，欢迎大家加入 AntV 一同探究，一同解决世界级的可视化难题。

以上是前端专家们的部分精彩问答，如果你想了解更多问题，或者有疑问想进行面对面交流，一定不要错过参加 IMWeb Conf 2018 的机会！