利用ichart绘制网页图表
首先，最好的教程在这里：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>
