简介:ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。如果你正在开发HTML5的应用,ichartjs正好适合您。chartjs是基于Apache License 2.0协议的开源项目。
心得:用ichartjs画图就是参照ichartjs官网(http://www.ichartjs.com/samples/index.html)的示例中心的示例以及ichartjs API(http://www.ichartjs.com/docs/zh/html/menu.html)(注:各个类的参数)就可以画出你想要的图形。
注意:现在项目中导入ichart.1.2.min.js库
示例:代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="ichart.1.2.min.js"></script> <script type="text/javascript"> $(function(){ var data = [ { name : '安全库存达成率', value:[1.33,1.27,1.34,1.17,1.3,1.1,1.35,1.3,1.26,0.99], color:'#db9034', line_width:2 }, { name : '安全库存率', value:[1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25,1.25], color:'#e0b645', line_width:2 } ]; var labels = ["2013年1月","2013年2月","2013年3月","2013年4月","2013 年 5 月","2013年6月","2013年7月","2013年8月","2013年9月","2013年10月"]; var chart = new iChart.LineBasic2D({ render : 'canvasDiv', data: data, align:'center', title : { text:'安全库存达成率', fontsize:24, color:'#f7f7f7' }, width : 1000, height : 400, shadow:true, shadow_color : '#20262f', shadow_blur : 4, shadow_offsetx : 0, shadow_offsety : 2, background_color:'#383e46', tip:{ enable:true, shadow:true }, legend:{ enable:true, background_color : null, align:'center', valign:'bottom', row:1, column:'max', color:'#f7f7f7', legend_space:40, sign_size:20, offsety:20, border : { enable : false } }, crosshair:{ enable:true, line_color:'#62bce9' }, crosshair:{ enable:true, line_color:'#62bce9' }, sub_option : { label:false, hollow_inside:false, point_size:8 }, coordinate:{ width:'82%', height:'80%', gridVStyle:{color:'#383e46'}, grid_color:'#cccccc', axis : { width : 0 }, grids:{ horizontal:{ way:'share_alike', value:8 }, vertical: { way:'share_alike', value:1 } }, scale:[{ position:'left', start_scale:0.7, end_scale:1.5, scale_space:0.1, scale_size:2, scale_enable:false, label : {color:'#ffffff',fontsize:12}, scale_color:'#9f9f9f' },{ position:'bottom', label : {color:'#ffffff',fontsize:12}, labels:labels }] } }); //开始画图 chart.draw(); }); </script> </head> <body> <div id="canvasDiv"></div> </body> </html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="ichart.1.2.min.js"></script> <script type="text/javascript"> $(function(){ var data = [ { name : '招标采购额占比', value:[83,86,85,78,91,81,59,82,84,65], color:'#4f81bd' }, { name : '非招标采购额占比', value:[17,14,15,22,9,19,41,18,16,35], color:'#e0b645' }, { name :'常规招标采购比例', value:[], color :'#f7f7f7' } ]; var chart = new iChart.ColumnStacked2D({ render : 'canvasDiv', data: data, labels:["2013年1月","2013年2月","2013年3月","2013年4月","2013年5月","2013年6月","2013年7月","2013年8月","2013年9月","2013年10月"], title : { text:'招标采购比例', color:'#f7f7f7' }, align:'center', width : 1000, height : 500, background_color :'#383e46', shadow : true, shadow_blur : 3, shadow_color : '#aaaaaa', shadow_offsetx : 1, shadow_offsety : 0, label:{color:'#f7f7f7'}, legend:{ enable:true, background_color : null, align:'center', valign:'bottom', row:1, column:'max', color:'#f7f7f7', legend_space:30, offsetx:-90, offsety:10, sign_size:12, border : { enable : false } }, tip:{ enable :true, listeners:{ //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引 parseText:function(tip,name,value,text,i){ return name+":"+value; } } }, percent:true,//标志为百分比堆积图 showpercent:true, text_space : 1,//坐标系下方的label距离坐标系的距离。 zScale:8, xAngle : 50, sub_option:{ label :false }, bottom_scale:1.1, coordinate:{ width:'82%', height:'80%', board_deep:10,//背面厚度 pedestal:false, left_board:false,//取消左侧面板 shadow:false,//底座的阴影效果 grid_color:'#6a6a80',//网格线 axis : { width : 0 }, scale:[{ position:'left', scale_enable : false, start_scale:0, scale_space:50, label:{color:'#f7f7f7'} }] } }); var data1 = [ { name : '常规招标采购比例', value:[80,80,80,80,80,80,80,80,80,80], color:'#f7f7f7', line_width:4 } ]; var line = new iChart.LineBasic2D({ z_index:1000, data: data1, tip:{ enable :true, listeners:{ //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引 parseText:function(tip,name,value,text,i){ return name+":"+value; } } }, sub_option : { smooth:true, label:false, hollow_inside:false, point_size:10 }, intersection:false, coordinate:chart.coo }); chart.plugin(line); chart.draw(); }); </script> </head> <body> <div id="canvasDiv"></div> </body> </html>
效果: