前端数据可视化插件有很多,但我用过的只有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

1.前端数据可视化插件:Highcharts、Echarts和D3(区别)的更多相关文章

  1. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  2. Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor

    Webservice WCF WebApi   注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...

  3. Python3:pyecharts数据可视化插件

    Python3:pyecharts数据可视化插件 一.简介 pyecharts 是一个用于生成 Echarts 图表的类库. Echarts 是百度开源的一个数据可视化 JS 库.主要用于数据可视化. ...

  4. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  5. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  6. 【推荐】开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可以参考下面两个网址:ECharts官方网址:http://ecomfe ...

  7. 基于World Wind的数据可视化插件

    基于开源数据可视化类库(MSChart.VTK.D3)实现的组件样例,并基于World Wind实现调用上述组件的功能插件. GitHub下载地址:https://github.com/hujiuli ...

  8. [原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色

    对灰度图进行彩色化是数据可视化中常见的需求,使用d3在客户端比较容易实现,本文使用d3生成图片,并显示: 代码如下: 代码中首先下载数据文件,然后设定d3的色带信息,生成一个空白的canvas元素,并 ...

  9. corethink功能模块探索开发(十八)前台页面插入jit前端数据可视化库

    效果图: 1.静态文件放入View目录中 在View目录下新建Public目录,在Public目录下新建js.css目录. 把jit的资源放入对应目录中 2.在html中引入jit Applicati ...

随机推荐

  1. 7、postman的变量

    环境变量 环境变量顾名思义,我们可以设置测试环境和生产环境的变量. 比如我们设置测试环境的某个变量值为A,但是生产环境的为B,这个时候就可以用到环境变量.当然我们也可以不用环境变量,直接手动改,不过试 ...

  2. markdown开篇

    def show(): print("你好世界!") print("实习的日子还是得好好学习呀!") print("加油 各位!")

  3. Quartz2作业监听

    在本教程中,我们将展示/介绍如何创建一个JobListener,跟踪运行工作状态在作业完成等. P.S 这个例子是Quartz 2.1.5 1. Quartz 作业 作业 - 用于打印一个简单的信息, ...

  4. 如何把本地文件上传github

    1.$ git config --global user.name "xxx" 2.$ git config --global user.email xxx@qq.com 3.进入 ...

  5. 一些CSS3新技术

    前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性.选择器(属性选择器.连字符.伪类.伪元素).RGBA ...

  6. JAVA API about HTTP 3

    package com.han.http; import java.io.IOException; import java.io.UnsupportedEncodingException; impor ...

  7. spark 变量使用 broadcast、accumulator

    broadcast 官方文档描述: Broadcast a read-only variable to the cluster, returning a [[org.apache.spark.broa ...

  8. YARN体系结构

  9. 关于Excel的ctrl+方向键失效的解决方法

    在Excel中按方向键,出现了类似滚动条的效果,即按下,表格就往下滚了一格.正常的情况应该是选中的单元格往下移动一格.其实这是一个很正常的情况,只要按一下Scroll Lock键就可以了,对于没有Sc ...

  10. css---过渡天坑

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...