您的位置：首页 > Web前端 > JavaScript

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

2013-11-13 14:25 381 查看
简介：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>


 

               效果：





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html5
                                                javascript
                                                ichartjs
                                                图形
                                                canvas
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航