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

最新推荐文章于 2021-05-27 15:07:28 发布

guoshatao

最新推荐文章于 2021-05-27 15:07:28 发布

阅读量3.6k

点赞数

分类专栏： ichartjs 文章标签： html5 javascript ichartjs 图形 canvas

本文链接：https://blog.csdn.net/yinraner/article/details/15812501

版权

ichartjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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



 
               效果：

guoshatao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对ichartjs基于基于HTML5的开源图形组件画图的心得

简介：ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。如果你正在开发HTML5的应用，ichartjs正好适合您。chartjs是基于Apache License 2.0协议的开源项目。心得：用ichartjs画图就是参照ichartjs官网（http://www.ichartjs.com/samples/in
复制链接

扫一扫