首先，最好的教程在這里：ichartjs
有了這個網站，要繪制網頁圖表簡直方便愉快！
接下來說一下使用方法~~~
進入網站，點擊在線設計器
在線設計器的使用方法就不說了，摸索一下就會了！關鍵在於兩個地方：
1. 源代碼
這里面的代碼直接復制出來，寫到我們的jsp文件中就可以直接顯示。很方便。
但需要注意的一點是：如果圖表中有中文，我們還需要在jsp代碼頂端加這么一句，
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
設置好編碼。這樣就可以正常顯示漢字了
2.數據源
我們新建一些圖表，這里這個數據源可以控制顯示多少個數據並設置參數。
除了在線設計器中的三種，條形圖、柱狀圖、餅圖，我們可以在網站主頁看到
這么多類型多樣的漂亮圖表，點進去可以view code。這部分code是js代碼。可以方便的拿出來使用！
想要繪制這些圖表時，將view code部分的代碼，復制到在線設計器中的Script部分，非常方便！
我們只需要注意div的名稱在js和xml部分一致就OK啦！
貼一個示例：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <meta charset='UTF-8'> <title>ichartjs designer</title> <script src='http://www.ichartjs.com/ichart.latest.min.js'></script> <script type='text/javascript'> $(function(){ var data = [ {name : 'Android',value : 52.5,color:'#4572a7'}, {name : 'IOS',value : 34.3,color:'#aa4643'}, {name : 'RIM',value : 8.4,color:'#89a54e'}, {name : 'Microsoft',value : 3.6,color:'#80699b'}, {name : 'Other',value : 1.2,color:'#3d96ae'} ]; var chart = new iChart.Pie3D({ render : 'ichart-render', data: data, title : { text : 'Mobile-Friendly Distribution', height:40, fontsize : 30, color : '#282828' }, footnote : { text : 'ichartjs.com', color : '#486c8f', fontsize : 12, padding : '0 38' }, sub_option : { mini_label_threshold_angle : 40,//迷你label的閥值,單位:角度 mini_label:{//迷你label配置項 fontsize:20, fontweight:600, color : '#ffffff' }, label : { background_color:null, sign:false,//設置禁用label的小圖標 padding:'0 4', border:{ enable:false, color:'#666666' }, fontsize:11, fontweight:600, color : '#4572a7' }, border : { width : 2, color : '#ffffff' }, listeners:{ parseText:function(d, t){ return d.get('value')+"%";//自定義label文本 } } }, legend:{ enable:true, padding:0, offsetx:120, offsety:50, color:'#3e576f', fontsize:20,//文本大小 sign_size:20,//小圖標大小 line_height:28,//設置行高 sign_space:10,//小圖標與文本間距 border:false, align:'left', background_color : null//透明背景 }, shadow : true, shadow_blur : 6, shadow_color : '#aaaaaa', shadow_offsetx : 0, shadow_offsety : 0, background_color:'#f1f1f1', align:'right',//右對齊 offsetx:-100,//設置向x軸負方向偏移位置60px offset_angle:-90,//逆時針偏移120度 width : 800, height : 400, radius:150 }); //利用自定義組件構造右側說明文本 chart.plugin(new iChart.Custom({ drawFn:function(){ //在右側的位置，渲染說明文字 chart.target.textAlign('start') .textBaseline('top') .textFont('600 20px Verdana') .fillText('Market Fragmentation:\nTop Mobile\nOperating Systems',120,80,false,'#be5985',false,24) .textFont('600 12px Verdana') .fillText('Source:ComScore,2012',120,160,false,'#999999'); } })); chart.draw(); }); </script> </head> <body style='background-color:#244c74;'> <div id='ichart-render'></div> </body> </html>