近年来，随着大数据的兴起和浏览器性能的提升，数据可视化成为了一个热点，前端也涌现出很多数据可视化的工作。我也做过一些数据可视化相关的产品。下面说说关于数据可视化的一些思考。本文所说的数据可视化泛指互联网公司在web前端接触到的数据可视化数据可视化。它是对数据可视化表示的科学技术研究。其中，这种数据的可视化表示被定义为以某种概括形式提取的信息，包括相应信息单元的各种属性和变量。它是一个不断发展的概念，其边界不断扩大。主要是指技术上更先进的技术，允许通过使用图形、图像处理、计算机视觉和用户界面解释的体积、表面、属性和动画的表示、建模和显示来可视化数据。与立体建模等特殊技术方法相比，数据可视化涵盖的技术方法范围要广得多。----------------------百度百科前端常说的视觉可视化，大部分指的是更直接、形象、形象地展示一些相关数据，特别是在网页上借助曲线和图表等显示形式。要做一个好的数据产品，需要产品经理->设计师->前端->后端->用户紧密配合，协调整个环节。产品需要了解数据可视化的理论基础，哪些数据可以可视化，哪些数据用户最想要。设计师包括视觉和交互。他们需要弄清楚如何最合理地显示数据。曲线图、直方图、饼图的优缺点是什么？不能只为了美观设计一个好看的图表，不管实际数据情况如何，都去展示。这很奇怪。前端其实是联系最紧密的部分，如何获取数据，什么格式对前后端最友好，使用什么技术方案，是svg库还是canvas库，是自己用还是用现成的库。实现成本有多高，性能如何，扩展性如何，都是需要考虑的问题。后端需要考虑数据的拉取，需要考虑数据格式，可以获取什么数据。上述分工只是粗略的说明。在这里看了一篇文章，小心，这个蛋糕有毒！饼图的正确打开方式中提到的一些经验大家可能都遇到过，我也有同感。我的数据似乎由直方图、折线图和饼图表示。我应该选择哪一个？饼图和圆环图类似，看我要不要在中间显示其他内容？我可以将数据映射到饼图的半径维度吗？数据可视化最重要的不是好看，而是让人一眼就明白这张图表传达的意思。其实如果有这方面信息图形的相关知识储备，就不会犯这些错误。支付宝有G2，里面有两个图学基础知识的相关介绍。我个人认为这是G2比echart更近一步、更规范的地方之一。详见VisualBasics-图表使用建议https://antv.alipay.com/vis/d...VisualBasics-图表设计指南：https://antv.alipay.com/vis/d...经典文献：在数据可视化的研究与实现中，《数据可视化》、《The Grammarof Graphics》、《深入浅出统计学》、《计算机图形学几何工具算法详解》、《Visualization Analysis and Design》、《ggplot2：数据分析与图形艺术》。说了这么多基础，接下来说说前端在可视化方面的一些相关开发和技术选型。首先，我们需要明白一个观点：技术选型不是一劳永逸的，始终要根据自己项目的实际情况以及个人喜好和技术基础的选择。下面说说一些常用的图表库和相关技术：1、echartssecharts是国内图表库中最好的。EFE团队也是目前国内技术实力最强的可视化团队。它使用画布作为渲染容器。鼠标事件等底层实现使用自研的zrender框架。echart2.0对应不同的组件如坐标轴图例用不同的canvas渲染。echart3之后，都合并到一张画布上了。猜测应该是底层框架升级了。博客：http://efe.baidu.com/，你这个不起眼的博客在抄他们的皮。.....这个博客很慢。http://echarts.baidu.com/blog….2、highcharts框架用的人很多，主要特点是IE6也支持。........但是，Microsoft不再支持IE6。淘宝连ie8都不支持。...一个收费的库，底层SVG。我个人认为他的API不如Echart友好。3.G2-支付宝蚂蚁金服产品，图表容器为canvas，由宇博团队开发。怎么说。.这个东西看起来还不错，但是大部分人在实际使用的时候还是会不由自主的选择前两个。大理系开源的东西就是这样。事情是好的，但我怕我们这样做了，团队就没了。而且他们官网的例子一开始好像是嫩蓝（或者嫩绿？），让人觉得整个产品很轻薄，不像echarts的墨黑，商务稳重的风格.现在看来，它正在慢慢向稳重的风格靠拢。继续前进的感觉很好。4、d3.jsd3也是老产品，图表容器使用svg。刚出来的时候各种动画很惊艳，图表类型也很丰富。感觉echarts开头也参考了它的图表类型，增加了几个新的图表示例。d3的优点是各种sampledemo比较齐全，适合即开即用。缺点是demo不适合二次开发。如果熟悉api，也可以直接自己画。它的api是一种排序和兼容svg的dom。对应jquery中html的dom。其他：阿里妈妈貌似一两年前出过图库。我给他们留言说：不如先出一个移动图表库，说不定市场会大一些。看来终于成了KPI的牺牲品了。以上是一些最常用的图表库，所以我们需要根据实际项目需要进行一些技术选型。手机图表库、echarts、G2应该都能用。在PC上，这是个人喜好的问题。报表类项目见设计师绘制的效果图。echarts是自定义最多的，G2没用过，highcharts文档也不完善。对于需要频繁更新数据的监控项目，canvas的性能应该会更好。下面说说数据可视化的一般应用场景，比如报表、监控、动态PR稿、地图、数据可视化系统等。ReportsReports用到的场景最多，使用的图表也最简单。一般echarts中的示例图表就足够了。监控类稍微复杂一些，一般涉及到实时性和健壮性。开发时，需要考虑后端接口。性能，还有页面图表渲染的性能问题，在数据量大之后，对前后端都是非常有挑战的。做起来也比较有意思，可以结合业务场景打造一整套数据可视化产品体系。动态公关稿件这类项目一般都有一个特点：匆忙、眼花缭乱、累人。项目周期很紧迫，动画效果一定很炫，工作起来很累。偶尔做一下还好，但一直做下去，感觉路有点偏，而且一般很少能找到现成的库和框架，这需要前期大量的技术调研和技术储备阶段。相关库一般需要canvas效果库和webGL库，比如：http://www.pixijs.com/，threejs，要求更高的可能需要一些游戏库来帮忙，比如：https://www.egret.com/,http://www.createjs.com/等等。地图等数据可视化单独拿出来，是因为现在越来越多的数据可视化场景需要地图。这也是数据可视化最头疼的地方。一般我们使用echart地图，或者百度地图，高德地图等来开发。其实百度地图还有一个地图可视化库http://mapv.baidu.com/，显示效果不如echart。...需要自定义开发的同学其实可以直接拿百度地图之类的东西在地图上覆盖一个overlay类，然后在这个overlay类里面填充一个canvas，自己做一些扩展。参见百度地图的demo；它后面的地图。.可以用css隐藏。....数据可视化系统的范畴比较大，还是要看业务场景。有些业务场景特别适合一堆相关的数据可视化系统。成就感还是满满的。==================================================待完成续==========================================
