jQuery 之用折线图、饼图、柱状图、仪表盘展现数据

女爷i 2022-07-21 09:01 197阅读 0赞

ECharts

基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。  
在线演示文档 《 Why ECharts ? 》 ：http://echarts.baidu.com/echarts2/doc/slide/whyEcharts.html\#/

使用教程 ：http://echarts.baidu.com/

github: https://github.com/ecomfe/echarts  
特色  
在线文档 《 Why ECharts ? 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。\*文档中展现的个别特性在IE8-中并没有得到支持，所以建议使用IE9+、chrome、safari、firefox或opear等高级浏览器阅读这份文档。  
\----------------------------------------------------  
Google Charts  
gchart是基于google图表API的jquery组件。使用gchart可以方便地生成强大的各种图表和报表。基于google图表接口的gchart，有着简单、方便、强大、够用、好用的特点。  
link ：https://developers.google.com/chart/interactive/docs/gallery/bubblechart?hl=zh-CN  
文档 ：《gchart：基于jquery的google图表接口组件全攻略》系列文章将带你走入gchart的报表世界。  
google图表API  
google图表API是google提供的一个可以生成各种图表的api接口。根据各种您的需求，Google 图表 API 会返回一幅 PNG 格式的图片来响应一个网址。Google 图表 API 可以生成多种类型的图片，包括折线图、条形图和饼图。您可以为每种图片类型指定属性，例如大小、颜色和标签。  
上面是抄Google图表API官方网站的，按照符合中国人听力习惯的话说就是：google图表API是一特屌的接口，把你想要的报表需求往里面一塞，他就能给你一PNG图片，这个PNG图片就是你想要的报表！

jgCharts并不是一个独立插件  
实际他封装的是Google Charts，让Google Charts的调用变得更简便，更“jquery”化。  
\----------------------------------------------------  
highcharts  
  
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。  
HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。现在官方的最新版本为Highcharts-3.0.6。  
Highcharts是一个制作图表的纯Javascript类库，主要特性如下：  
  
兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；  
对个人用户完全免费；  
纯JS，无BS；  
支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；  
跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；  
提示功能：鼠标移动到图表的某一点上有提示信息；  
放大功能：选中图表部分放大，近距离观察图表；  
易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；  
时间轴：可以精确到毫秒；  
在 RunJS 查看在线演示：http://runjs.cn/code/ih5xzoeb  
link ：http://www.highcharts.com  
效果图：http://www.highcharts.com/demo/bar-basic/grid  
\----------------------------------------------------  
PowerCharts Plug  
收费  
\----------------------------------------------------  
jqplot  
简介jqPlot是一个jQuery绘图插件，可以利用它制作漂亮的线状图、柱状图和饼图。jqPlot支持为图表设置各种不同的样式。提供Tooltips，数据点高亮显.  
link ：http://www.jqplot.com  
实例 ：http://www.jqplot.com/tests/line-charts.php  
\----------------------------------------------------  
refer  
1 http://blog.360converter.com/archives/1095  
2 9 个基于JavaScript 和 CSS 的 Web 图表框架 http://www.cnbeta.com/articles/79418.htm  
3 http://www.cnblogs.com/fdszlzl/archive/2009/06/20/1507371.html

不过在chrome中，最终是使用svg画图。