js图表调研文档

js图表调研文档

根据从各大平台的使用情况以及综合参考网上当前数据结果，我大致将js图表插件的调研方向放在了四款产品上：
* Highcharts
* ECharts
* FusionCharts
* D3.js

下面我们从各个角度对上述四款产品的使用进行解读。

---

Highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

优点 ：
1、完整的实例演示，功能介绍和详细的api文档，实例更多，方便观看，这点对初学者来说是十分必要的。
2、基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图。
3、超轻量级，并且性能非常好，支持所有浏览器，但对于不同设备性能不太一样。
4、图表展现出来也是极其的美观简约大气。

缺点：
1、商业收费，外国的。
2、主要问题是个人支持， 一般的问题好解决，但是一旦遇到了关键问题，个人支持非常有限。
3、支持图形相对来说，比较少。
4、svg导致复杂度搞会减慢渲染速度（任何过度使用DOM的应用都不快）。
5、不适合游戏应用。

官网：https://www.hcharts.cn
使用教程：https://www.hcharts.cn/docs
API文档：https://api.hcharts.cn/highcharts
下载：https://www.hcharts.cn/download
GitHub: https://github.com/highcharts/highcharts

---

ECharts

ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足百度商业体系里各种业务系统的报表需求。以前这些系统的图表需求百度都是使用flash去实现的，百度分工很细，有专门的flash组同学去做这个事情，这就不可避免多了一个沟通环节，作为前端工程师无法独立掌控，不管是数据接口的设计，个性化的需求都得沟通商定。而且一个系统内会有很多个flash在不同场景下出现，他们并没有实现通用。加上乔帮主不让i系列上运行flash以及html5的火热，百度需要寻求一个解决方案。于是在2012年初，开发了一个全新的轻量级Canvas类库ZRender，那可以说是ECharts的原型，虽然跟现在已经相去十万八千里了。
　　正如前面提到的，ECharts来自ZRender，那时的ZRender是包含图表功能的，甚至拖拽重计算已经在那个时候被实现了，但各种图表数据逻辑与图形渲染耦合，非模块化，Demo时随心所欲的特殊定制，百度意识到这是一个糟糕的设计。ZRender做了第一次大规模的重构，抽离了一切图表相关功能，纯粹的作为底层Canvas类库使用。
　　而被抽离的图表逻辑构建成为ECharts 0.1版本，但基本仍旧属于Demo状态，因为接口不规范，个性化能力和通用性都太差了。这份标准是在几乎没考虑实现成本的情况下制定的，追求设计的合理、高度个性化的扩展能力，可想而知，这是给团队挖了一个很深很深的坑，在紧接着的近10个月时间里ECharts团队就是看着文档一步一步从这个坑里爬出来。
　　2013年6月30日，ECharts发布了1.0版本，这份标准完全成为了ECharts 1.0的API文档，而且我们还加入了更多的数据交互能力。虽然这份标准目前已经成为了ECharts文档的子集了，但它的重要性不容置疑，现在看来接口设计的合理比起实现成本重要得多。

优点 ：
1、国产货有语言优势或区域优势。
2、免费，各类图，各种形式，K线图完全免费开源。
3、对于处理大量的数据和3D绘图（基于Canvas）。
4、支持和弦图、力导布局图、拖拽重计算、数据视图、值域漫游、大规模散点。
5、支持动态类型切换（十分方便，以内置代码，轻轻动动手指就可）。

缺点：
1、文档很多地方写得很糟糕。
2、bug还是比较多。
3、对IE8及IE8（甚至IE9）以下的兼容性非常差，差到极点，报一大堆错误。
4、实例页面只有option内容，引用哪些js，和css不知道。
5、3.0有些地方向后不兼容2.0，在2.0中的配置在3.0中已经找不到了。

官网：http://echarts.baidu.com
使用教程：http://echarts.baidu.com/tutorial.html
API文档：http://echarts.baidu.com/api.html
下载地址：http://echarts.baidu.com/download.html
GitHub: https://github.com/ecomfe/echarts

---

FusionCharts

FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。 FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。

优点 ：
1、支持不同类型图表：如果需要各种类型图标， Fusioncharts都没有问题，提供了90多种图表和965种地图。
2、自定义并且有实际例子：自定义非常简单，包含了很多直接可以使用的例子。
3、封装器和插件：提供了官方的封装器和插件，所以有非常好的支持。
4、浏览器和设备支持：支持所有浏览器（IE6）和设备。
5、高级特性：提供了很多高级特性，宏，可编辑图表。
6、基于SVG

缺点：
1、非常重，如果是基于web的应用会成问题，但是App会好些。
2、价格相对于前面有些贵。
3、使用起来虽然简单，只要调用其API即可，但是不够灵活。

官网：https://www.fusioncharts.com
使用教程：https://www.fusioncharts.com/dev/getting-started/installation.html
API文档：https://www.fusioncharts.com/dev/api/fusioncharts.html
下载地址：https://www.fusioncharts.com/download

---

D3.js

D3.js是一个基于数据的文档操控JavaScript库。使用HTML，SVG和CSS，D3能够帮你让数据活起来。D3所强调的Web标准帮助开发者在无需捆绑任何专有框架的前提下，结合强大的可视化组件及其数据驱动的DOM操纵方法，充分利用现代浏览器的全部功能。。
D3允许开发者将任意数据绑定在文档对象模型（DOM）之上，然后再应用数据驱动转换到文档中。例如，你可以使用D3从一个数组生成一个HTML表格。或者使用同样的数据来创建一个带有平滑过渡和互动功能的交互式SVG柱状图。
D3并非一个旨在涵盖所有功能特征的整体框架，相反，D3解决的问题核心是：基于数据的高效文档操作。这避免了局限的数据展现，提供了非凡的灵活性，体现出诸如CSS3，HTML5和SVG等Web标准的全部功能。使用最小的开销，D3的速度非常快，支持大型数据集以及交互与动画的动态行为。D3的函数风格允许通过各种组件和插件的形式进行代码的重用。
d3厉害的地方在于它建立了一整套数据到SVG属性的计算框架，常用Data visualization模型，大多都可以再d3.layout里面找到，你常用的几何图形，在d3.svg里面都有。它为不理解SVG属性计算公式的程序员提供了一整套工具包，让你可以轻松的把数据转换成你想要的SVG属性。而不用把精力耗费在学习如何生成一条path之类的事情上。现在看来，组件化可以解决HTML排版的很多问题，当然也可以解决SVG排版的问题。但是，d3作为无数组Data Visualization库的基础，已经太大而不能转型了。但是你结合d3核心的数学处理模块和最新的组件化框架，很容易就可以做出复用性和易用性都很高的SVG组件。

优点 ：
1、庞大的用户基数，开源。
2、友好开放的社区。
3、大量的资料。
4、美、酷炫。
5、升级到v4后svg操作和canvas操作都支持。
6、轻量级，适合高性能开发 。

缺点：
1、学习成本比较高，难度较大。
2、十分灵活，但是造成写好任何一个可视化数据都十分耗费时间。
3、版本兼容做的十分不友善，浏览器支持也不好。
4、标签管理比较麻烦，其他类库都自动管理。
5、导出图形比较麻烦，需要额外的开发。

官网：https://d3js.org
使用教程：https://github.com/d3/d3/wiki/Tutorials
API文档：https://github.com/d3/d3/blob/master/API.md
GitHub: https://github.com/d3/d3

---

js数据可视化平行对比

基于js的数据可视化，说到底是svg和canvas之间的差距，而svg和canvas之间到底有什么样的区别，可以看下面的列表：

两种比较普遍运用的技术各有千秋，我们更多的需要根据项目的特点去选择用哪一种类型的数据可视化库。

以下是Google趋势上对上述四款产品的热度对比

---

个人调研心得

主要针对我们准备进行开发的项目Stargate移动端进行了js数据可视化类库的调研，项目需求中并没有想要使用过多酷炫的动画效果以及功能强大复杂度极高的用例，所以我在不需要任何付费的基础场完成了各个类库仿照stargate数据结构进行填充的Demo，单纯的根据我们想要实现的功能对类库的使用情况有以下想法（ps：作为一个初学者的角度)：

1、平行对比在进行Demo开发的时候Highcharts的少数英文文档并没有限制到我开发的进度或者提升开发的难度，反而更多的配置项已经在例子中详细的列出，API中给出的解释也较为详细切容易理解，只有一点在当时，我试图在同一个页面加载柱状图、饼状图、和地图，但是HighCharts并不同时兼容HighCharts和HighMaps，地图的导入需要另一个js文件，但其实官网上给出了解决方案，但在开发阶段并没有意识到这是两者的兼容问题，花费一些时间在查找自己的问题。

2、在调研中期询问过琪总是否有对这些产品有一些个人看法，当时琪总给予了中肯的意见和对各个产品的评价，最终认为在国内ECharts的上手程度更好(上面的Google趋势给出的资料也可以看出),但我个人在使用ECharts的过程中有着切身体会，文档的差距真的不是一点两点，太多地方描述的十分模糊，甚至连API文档针对字段的意思和需要给出的value值得解释也很不容易理解，还是在查询别的资料才进行了改正，这上面耗费了很多时间，同时，在使用ECharts的过程中地图上经历了一下2.0和3.0的迭代，其中针对地图的开发3.0需要下载百度的专有地图js去进行开发，但在下载的解释中只说根据图例并没有讲述去哪里进行下载还有到底下载哪一款对应的js，这些又是文档的差距，最后，ECharts的美观型如果不追求3D和需求型的高端效果，简单的效果呈现并没有Highcharts美观。

3、本身调研的侧重点是前两款产品，但是将调研的产品提升为四个也正是因为在初期了解到FusionCharts的历史地位和能力，纯英文的文档如果对于英语能力不好的开发者来说还是会耗费大量时间（但是Google浏览器可以直接翻译，哈哈哈），使用过程比我想象中要简单一些，但是需要导入的js文件远比其他要多，而且地图也和ECharts有相同的问题，但是文档中讲的比较详细，中间可能因为网络问题，下载并不顺利，并且有定制内容的下载方式需要给对方邮箱这些操作，由于很多可能需要，所以可能在效率上有点低，同样定制效果很差，有很细节做得不够灵活，但是相应完成的效果还是十分美观大方的。

4、D3.js，看到无数资料听到无数声音的结论是，十分酷炫，但学习起来比较困难，在有这个前提下我把这款产品放到了最后调研，果然D3的官网并没有像其他产品给出了各种简单明了的示例，所有的文档和代码还有导入方式都是直接链接到GitHub上，接入方式十分简单，文档中资料并没有想象中易读，甚至有些已经被舍弃，所以学习的道路可能需要花费更多的时间，在网上找到一个小小的介绍示例敲了一遍，结论就是果然十分麻烦，基本就是自己用代码去画这些东西，复杂程度很高，想要体会到酷炫的效果并不是我这种一天两天就能看到的产物，是需要相当的时间去学习的东西。