近来几年跟着大数据的鼓起，以及浏览器机能的提拔，数据可视化成为了一个热门，前端也冒出来了许多数据可视化的岗亭。本人也做过一些数据可视化相干的产物，下面聊聊对数据可视化的一些思索。本文的数据可视化平常专指互联网公司web前端打仗的数据可视化
数据可视化，是关于数据视觉表现情势的科学手艺研讨。个中，这类数据的视觉表现情势被定义为，一种以某种提要情势抽提出来的信息，包含响应信息单元的种种属性和变量。它是一个处于不停演化当中的看法，其边境在不停地扩大。主要指的是手艺上较为高等的手艺要领，而这些手艺要领许可运用图形、图象处置惩罚、计算机视觉以及用户界面，经由过程表达、建模以及对平面、外表、属性以及动画的显现，对数据加以可视化诠释。与平面建模之类的迥殊手艺要领比拟，数据可视化所涵盖的手艺要领要普遍很多. ———————-百度百科
而前端常说的视觉可视化大部分是指借助曲线图表等展现情势把一些相干数据更直接、抽象、活泼、详细的展如今web页面上。要做一个好的数据产物是须要 产物司理->设想师->前端->后端->用户全部链路严密配合密切合作而且谐和的。
产物须要懂数据可视化的理论基本，哪些数据能够可视化，哪些数据是用户最想要的。
设想师包含视觉和交互，须要理清晰数据怎样展现最合理，曲线，柱状图，饼状图，都有哪些优瑕玷，不能仅仅为了雅观设想了一个悦目的图形，而不顾现实数据状况，展现出来就很新鲜。
前端实在在内里是最严密的一环，数据怎样猎取，什么花样对前后端最友爱，采纳什么手艺计划，是svg的库，照样canvas的库，是本身撸照样用现成的库。完成本钱有多高，机能、扩大性怎样都是须要斟酌的题目
后端须要斟酌的就是数据的拉取，须要斟酌数据花样以及能猎取哪些数据。
以上分工只是一个大略的申明。这里看了一篇文章警惕，这饼有毒！论饼图的准确打开方式内里讲的一些阅历能够人人都遇到过，我也深有同感
我的这些数据，彷佛柱状图、折线图、饼图都能示意啊，究竟应当选哪一个？
饼图和环形图也差不多，取决于我要不要在中心显现其他内容吗？
我可不能够将数据映射到饼图的半径维度上
数据可视化最主要的不是悦目，而是让人一览无余的邃晓这个图表传达出来的意义。
实在这方面是有相干的信息图表学的相干学问贮备的话就不会犯这些错误了。支付宝有个G2 内里有两个相干的图表学基本学问引见，我个人认为这是G2 比echart更近一步，更范例化的点之一。
详见这里
可视化基本-图表运用发起 https://antv.alipay.com/vis/d…
可视化基本-图表设想指引范例：https://antv.alipay.com/vis/d…
以及典范文献：
在数据可视化的研讨和完成中，《数据可视化》、《The Grammarof Graphics》、《深入浅出统计学》、《计算机图形学多少东西算法详解》、《Visualization Analysis and Design》 、《ggplot2：数据剖析与图形艺术》 。
叨叨了这么多基本，下面说说前端在可视化里的一些相干的生长和手艺选型
起首须要邃晓一个看法：手艺选型没有一劳永逸的，永远是依据你的项目现实状况以及你的个人偏好和手艺基本来做的挑选。
下面说说罕见的一些图表库和相干手艺：
1.echarts
echarts算是国产的图表库里最好的了。EFE团队也是国内手艺气力最雄厚的可视化团队.采纳canvas作为衬着容器。底层一些完成比方鼠标事宜啥的用的本身开辟的zrender框架。
echart2.0对应差别的组件比方坐标轴图例是用差别的canvas来衬着的，echart3以后都合并到一个canvas内里了，猜想应当是底层的框架晋级了
博客： http://efe.baidu.com/，鄙人的博客就是copy的他们的皮肤。。。。。。
这个博客更的很慢了。
http://echarts.baidu.com/blog…。
2.highcharts
这个框架用的人也不少，主打就是IE6也支撑。。。。。。。。。然并卵微软都不支撑IE6了。淘宝连ie8都不支撑了。。。。收费的库，底层用的SVG。私认为他的API运用起来没有Echart友爱。
3.G2-支付宝
蚂蚁金服的产物，图表容器为canvas，玉伯的团队开辟的。怎样说呢。。这个东西看着还不错，不过现实运用的时刻大部分人照样会情不自禁的去挑选前面两个，大阿里系的开源东西就是这么个鬼状况。东西是不错，就怕搞着搞着团队没了。而且他们官网那些示例最最先貌似是谁人嫩蓝色（or嫩绿色？）看起来让人以为全部产物很轻佻，不像echarts 墨黑色，一种商务庄重风。如今貌似也逐步像庄重作风挨近了。继续下去觉得照样不错的。
4.d3.js
d3也算是资格比较老的一个产物了，采纳svg作为图表容器。刚最先出来的时刻种种动画比较冷艳图表范例也很雄厚，觉得echarts一最先也参照它的图表范例新增了好几个图示意例。
d3的长处是种种示例demo比较完善合适拿来就用，瑕玷就是demo不合适二次开辟，熟习api的话也能够直接本身画，他的api是对svg的dom的一种整顿和兼容，类比于jquery对应html的dom。
其他：
一两年前阿里妈妈貌似出过一个图表库，我当初还给他们留言说：为啥不先出一个挪动端的图表库说不定更有市场。貌似末了沦为KPI的牺牲品
以上就是最罕见的一些图表库，那末我们须要依据现实项目须要来做一些手艺选型。
挪动端图表库，echarts和G2应当都能够。pc端就看个人喜好了。报表范例的项目看设想师画的结果稿吧，echarts可定制性最高，G2没用过，highcharts文档不健全。
监控范例的项目须要频仍更新数据的优选挑选canvas的机能应当更好。
下面说说数据可视化的平常运用场景
报表类，监控类，动效pr稿类，舆图类，数据可视化体系等。
报表类
报表类运用场景最多，运用的图表也最简朴平常echarts内里的示例图表就可以满足了，
监控类
监控类轻微复杂点，平常涉及到及时性和妥当性，开辟的时刻须要斟酌后端的接口机能，以及页面图表衬着的机能题目，数据量大了以后对前后端都很有挑战性。做起来也比较有意义，和营业场景结合起来能做一整套的数据可视化的产物体系。
动效PR稿类
这类范例的项目平常都有一个特性：急，炫，累。项目周期很急，动画结果要很炫，干起活来很累。偶然做做还行，一向搞，就觉得路走的有点偏，而且平常很少能找到现成的库和框架，前期须要大批的手艺调研和手艺贮备。相干的库平常须要canvas的结果库，webGL的库，比方:http://www.pixijs.com/ ，threejs，请求更高的能够须要一些游戏库来帮助了比方：https://www.egret.com/ ，http://www.createjs.com/等等。
舆图类
这类的数据可视化零丁拿出来是因为如今越来越多的数据可视化场景里须要用到舆图。这也是数据可视化最贫苦的一向，平常我们借助echart的舆图，或许百度舆图，高德舆图等来开辟，实在百度舆图也出了个舆图可视化的库http://mapv.baidu.com/ ，展现结果没有echart好。。。。须要定制开辟的同砚实在能够直接拿百度舆图之类的然后在舆图上蒙一层掩盖类，然后在这个掩盖类里添补一个canvas做一些本身的扩大拜见百度舆图的demo；背地的舆图。。能够用css隐蔽掉。。。。。
数据可视化体系
这个领域比较大，照样须要看营业场景，某些营业场景就迥殊合适做一堆相干联的数据可视化体系。做好了成就感照样满满的。
================================================
未完待续
=======================================
