【大数据时代】前端数据可视化利器D3.js、highcharts、echarts(毕设调研)

数据可视化:

数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来的信息,包括相应信息单位的各种属性和变量。数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息

一、了解可视化框架

1.D3.js

【大数据时代】前端数据可视化利器D3.js、highcharts、echarts(毕设调研)

 如图所示,D3 的全称是(Data-Driven Documents)。D3 .js是一个JavaScript库(是一个被数据驱动的文档),用于在浏览器中创建交互式可视化.

D3.js库允许我们在数据集的上下文中操作网页的元素.这些元素可以是HTML,SVG,画布元素,可以根据数据集的内容进行引入,删除或编辑.它是一个用于操作DOM对象的库. D3.js可以成为数据探索的宝贵帮助,它可以让您控制数据的表示,并允许您添加交互性.

D3.js的官方

        官网:https://d3js.org/

        官方API:https://github.com/d3/d3/blob/master/API.md

2.highcharts

【大数据时代】前端数据可视化利器D3.js、highcharts、echarts(毕设调研)

 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

Highcharts 的官方:

          官网:https://www.highcharts.com.cn/demo/highcharts

          官方使用教程:https://www.highcharts.com.cn/docs/start-introduction

3.echarts

【大数据时代】前端数据可视化利器D3.js、highcharts、echarts(毕设调研)

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭 

 ECharts 的官方:

           官网:https://www.echartsjs.com/zh/index.html

           官方API:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

           

二、初步调研

1.兼容性

  • Highcharts 兼容 IE6 及以上的所有主流浏览器,完美支持移动端缩放、手势操作。
  • Echarts 兼容 IE6 及以上的所有主流浏览器,同样支持移动端的缩放和手势操作。
  • D3 兼容IE9 及以上的所有主流浏览器,对于移动端的兼容性也同上。
  • 也就是说,这三个插件都兼容IE9及以上的所有主流浏览器,但如果开发需求中包括IE7/IE8,那么就只能选择Highcharts或者Echarts了。

2.是否免费/开源

  • Highcharts 非商业免费,商业需授权,代码开源。
  • Echarts 完全免费,代码开源。
  • D3 完全免费,代码开源。

3.难度

  • Highcharts 基于SVG,方便自己定制,但图表类型有限。
  • Echarts 基于Canvas,适用于数据量比较大的情况。
  • D3.v3 基于SVG,方便自己定制;D3.v4支持Canvas+SVG,如果计算比较密集,也可以选择用Canvas。除此之外,D3图表类型非常丰富,几乎可以满足所有开发需求,但代码相对于以上两个插件来说,会稍微难一点。

基于此,如果你能力很强,可以直接用D3。反之,如果你是一个初学者或者对于这方面没那么熟悉,那么就要从这几点来考虑了:如果数据量比较大,可以考虑Echarts;如果只是一些简单的数据,且客户对界面定制较多,则可以考虑使用highcharts;如果前两者都不能满足需求,那么就只能用D3来一点一点做了。

 

 

参考博客:https://blog.csdn.net/enweitech/article/details/79171309