对ichartjs基于基于HTML5的开源图形组件画图的心得
2013-11-22 12:20
459 查看
简介：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库
示例：代码
[html] view
plaincopy
<%@ 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>
<pre class="html" name="code"><%@ 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>
</pre><br>
<pre></pre>
<p> </p>
<p><span style="font-size:18px; color:#000000"> 效果：<img alt="" src="http://img.blog.csdn.net/20131113141837546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWlucmFuZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"><img alt="" src="http://img.blog.csdn.net/20131113141851859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWlucmFuZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></span></p>
<pre></pre>
心得：用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库
示例：代码
[html] view
plaincopy
<%@ 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>
<pre class="html" name="code"><%@ 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>
</pre><br>
<pre></pre>
<p> </p>
<p><span style="font-size:18px; color:#000000"> 效果：<img alt="" src="http://img.blog.csdn.net/20131113141837546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWlucmFuZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"><img alt="" src="http://img.blog.csdn.net/20131113141851859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWlucmFuZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></span></p>
<pre></pre>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 对ichartjs基于基于HTML5的开源图形组件画图的心得
- 基于HTML5 Canvas的开源图形组件-ichartjs 入门篇
- 基于HTML5的开源图形组件学习
- 基于HTML5的开源图形报表组件
- echarts(国产)基于html5-canvas的开源图表绘制组件
- jmGraph：一个基于html5的简单画图组件
- 采用HTML5的开源组件绘制复杂图形
- 基于HTML5的ichartjs图表组件在Android应用中的使用
- 分享个基于html5的开源的图表组件
- ichartjs-基于html5的图表组件
- 介绍一款使用html5画图的JS开源软件ichartjs
- 介绍一款使用html5画图的JS开源软件ichartjs
- Literally “Canvas”- 开源的HTML5画图组件
- aspx.net开源的画图组件
- 基于Google GWT的图形编辑框架gwt-html5-graph发布了！
- 移动中”的HTML5-开源图表库ichartjs-王鹤
- 【转】MAQETTA: 基于HTML5的开源可视化界面设计工具
- HTML5拓扑图形组件设计之道（一）
- 开源个 基于 Vue 2.0 的 Mobile 组件库 ml-ui
- android基于开源网络框架asychhttpclient,二次封装为通用网络请求组件