jQuery图表(jqPlot,Highcharts)

来源:互联网 发布:深圳龙岗ug编程培训 编辑:程序博客网 时间:2024/05/20 03:45
jQuery图表在http://www.oschina.net/project/tag/275/jquery-chart共有14款 jQuery图表开源软件 
一 jqPlot 
jqPlot官网:http://www.jqplot.com/ 
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能. 
二 Highcharts 
highcharts官网:http://www.highcharts.com/ 
授权协议: 对个人用户完全免费,非开源(商用收费) 
支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图, 
兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等. 
三 jqPlot示例 
参考资料 
jquery jqPlot API 中文使用教程 
http://www.cnblogs.com/mofish/archive/2011/08/15/2139728.html 
jqPlot 图表中文API使用文档及源码和在线示例 
http://www.jb51.net/article/29652.htm 
http://www.jb51.net/article/19365.htm 
1 引用css,js文件 
Js代码  收藏代码
  1. <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->   
  2. <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />   
  3. <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>   
  4. <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>   
  5. <script language="javascript" type="text/javascript" src="js/jqplot.pieRenderer.min.js"></script>  

2 增加一个图表展示区域的容器 
Html代码  收藏代码
  1. <div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div>  

3 获取数据并执行加载 
Js代码  收藏代码
  1. $(document).ready(function(){   
  2.           jQuery.jqplot.config.enablePlugins = true;  
  3.           var data = [['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7],['Out of home', 6],['Groothandel', 5],   
  4.                       ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]];  
  5. plot7 = jQuery.jqplot('chart',[data],  
  6.             {  
  7.               title: ' ',  
  8.               seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } },  
  9.               legend: { show:true }  
  10.             }  
  11.           );           
  12.   
  13. });   

以下上传了下载的资料,方便大家学习! 
除了jqPlot,Highcharts外,是一些其它的图表插件资料!
0 0
原创粉丝点击