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

来源:互联网 发布:sql注入分析 编辑:程序博客网 时间:2024/04/30 10:03

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画图。


0 0
原创粉丝点击