对ichartjs基于基于HTML5的开源图形组件画图的心得

来源：互联网发布：网络销售原油好做吗编辑：程序博客网时间：2024/06/04 23:30

简介：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>

 
               效果：
	
					
					   对ichartjs基于基于HTML5的开源图形组件画图的心得
	  	   对ichartjs基于基于HTML5的开源图形组件画图的心得
	  	   基于HTML5 Canvas的开源图形组件-ichartjs 入门篇
	  	   基于HTML5的开源图形报表组件
	  	   基于HTML5的开源图形组件学习
	  	   基于HTML5的ichartjs图表组件在Android应用中的使用
	  	   介绍一款使用html5画图的JS开源软件ichartjs
	  	   基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
	  	   基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
	  	   基于 HTML5 的 Windows 画图程序
	  	   基于ichartjs在android上使用HTML5实现各种图表的类库
	  	   基于ichartjs在android上使用HTML5实现各种图表的类库
	  	   分享个基于html5的开源的图表组件
	  	   移动中”的HTML5-开源图表库ichartjs-王鹤
	  	   基于HTML5 Canvas和jQuery 的画图工具的实现
	  	   基于HTML5 Canvas和jQuery的画图工具的实现
	  	   基于HTML5 Canvas和jQuery 的画图工具的实现
	  	   基于HTML5 Canvas和jQuery 的画图工具的实现
	     		  
	  	   应用HttpClient来对付各种顽固的WEB服务器
	  	   quake3_hacking_1 搭建hacking环境
	  	   软件设计模式之单例模式
	  	   EEPROM、EPROM、FLASH 的区别总结
	  	   log4j学习之SocketAppender
	  	   对ichartjs基于基于HTML5的开源图形组件画图的心得
	  	   【LabVIEW小技巧】LabVIEW嵌套的if…else…这样实现
	  	   register_shutdown_function()函数使用
	  	   笔记2
	  	   VirtualBox下的Ubuntu安装增强功能
	  	   王垠：编辑器与IDE
	  	   keepalived+nginx实现双机热备
	  	   第七章时间，延迟和延缓操作
	  	   josso 2.3 部分译文