简单的统计图表ichartjs的使用

ichartjs 是一款基于HTML5的图形库。废话不多说，直接说怎么用。

1、首先下载，点击下载

2、只需要这一个js，粘贴赋值到自己项目中即可。

3、引入js

<script  type="text/javascript" src="../js/ichart.1.2.min.js"></script>
<script  type="text/javascript" src="../js/jquery.min.js"></script>

注：	（1）路径根据实际情况自行调整。

	（2）jquery没有的自行百度。

4、需要展示图表的地方加入

<div id="canvasDiv"></div>

5、加入最后的js代码
注：这段js复制即可  点击选择你需要的类型

   
   

    
    	$(
    
    function(){

   
   
   
   
	
    
    	
    
    var data = [

   
   
   
   
		
    
    	{name : '
    
    IE',value : 35.75,color:'
    
    #a5c2d5'},

   
   
   
   
		
    
    	{name : '
    
    Chrome',value : 29.84,color:'
    
    #cbab4f'},

   
   
   
   
		
    
    	{name : '
    
    Firefox',value : 24.88,color:'
    
    #76a871'},

   
   
   
   

    
    			{name : '
    
    Safari',value : 6.77,color:'
    
    #9f7961'},

   
   
   
   

    
    			{name : '
    
    Opera',value : 2.02,color:'
    
    #a56f8f'},

   
   
   
   

    
    			{name : '
    
    Other',value : 0.73,color:'
    
    #6f83a5'}

   
   
   
   

    
    		];

   
   
   
   
		        	

   
   
   
   
		
    
    new iChart.Column2D({

   
   
   
   

    
    			render : '
    
    canvasDiv',

   
   
   
   

    
    			data: data,

   
   
   
   

    
    			title : '
    
    Top 5 Browsers from 1 to 29 Feb 2012',

   
   
   
   

    
    			showpercent:
    
    true,

   
   
   
   

    
    			decimalsnum:2,

   
   
   
   

    
    			width : 800,

   
   
   
   

    
    			height : 400,

   
   
   
   

    
    			coordinate:{

   
   
   
   
			
    
    	background_color:'
    
    #fefefe',

   
   
   
   

    
    				scale:[{

   
   
   
   

    
    					position:'
    
    left',	

   
   
   
   

    
    					start_scale:0,

   
   
   
   

    
    					end_scale:40,

   
   
   
   

    
    					scale_space:8,

   
   
   
   

    
    					listeners:{

   
   
   
   

    
    						parseText:
    
    function(t,x,y){

   
   
   
   
							
    
    return {text:t+"
    
    %"}

   
   
   
   

    
    						}

   
   
   
   

    
    					}

   
   
   
   

    
    				}]

   
   
   
   

    
    			}

   
   
   
   

    
    		}).draw();

   
   
   
   

    
    	});
   
   
一个简单的图表就完成啦！

由于本人水平有限，难免会有所遗漏，有不妥之处还望指出，有什么问题点击回复即可，我会尽快回复！