首页 技术 正文
技术 2022年11月8日
0 收藏 489 点赞 1,407 浏览 999 个字

前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/)、Echarts(http://echarts.baidu.com/)和D3(https://d3js.org/),

Web开发过程中选择使用哪一个插件是很重要的问题。就我个人而言,一般会从以下几点考虑。 

1.兼容性

使用一个插件之前必须要先评估一下它对浏览器的兼容性,不然写完了发现没法儿用就得不偿失了。经过多次尝试,我初步判断这三个插件的兼容性是这样的:

  1. Highcharts 兼容 IE6 及以上的所有主流浏览器,完美支持移动端缩放、手势操作。
  2. Echarts 兼容 IE6 及以上的所有主流浏览器,同样支持移动端的缩放和手势操作。
  3. D3 兼容IE9 及以上的所有主流浏览器,对于移动端的兼容性也同上。

 也就是说,这三个插件都兼容IE9及以上的所有主流浏览器,但如果开发需求中包括IE7/IE8,那么就只能选择Highcharts或者Echarts了。 

2.是否免费/开源

  1. Highcharts 非商业免费,商业需授权,代码开源。
  2. Echarts 完全免费,代码开源。
  3. D3 完全免费,代码开源。

 考虑到Highcharts用于商业用途时还需要授权,而其它两个都不需要,那么在其他条件都相同的情况下,可以考虑用另外两个插件。 

3.难易程度

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

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

一般:

  1、开发时间短,所以也就限制了D3.js的使用。

  2、要尽量的减少开发的成本,所以也就不能使用hightcharts.js(hightcharts是一款个人免费,商业付费的框架)。所以在再三的比对之下最终选择了echarts.js

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,487
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,736
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,487
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,127
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,289