自制ichartjs饼图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自制ichartjs饼图相关的知识，希望对你有一定的参考价值。
饼图:2个数据:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>ichart.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="ichart/ichart.1.2.min.js"></script> <script type="text/javascript"> $(function(){ var data = [ {name : ‘A‘,value : 86/(86+136+220), Count: 86,color:‘#750000‘}, {name : ‘B‘,value : 136/(86+136+220),Count: 136,color:‘#003d79‘}, {name : ‘C‘,value : 200/(86+136+220),Count: 200,color:‘#969696‘} ]; var chart = new iChart.Pie2D({ offset_angle:-100, render : ‘canvasDiv‘, title:{ text:‘Defect Priority‘, color:‘#000000‘, height:40, //border:{ //enable:false, //width:[0,0,2,0], //color:‘#FFFFFF‘ //} }, padding:‘2 10‘, footnote:{ //text:‘StatCounter Global Stats,design by ichartjs‘, color:‘#e0e5e8‘, height:30, border:{ enable:true, width:[2,0,0,0], color:‘#343b3e‘ } }, width : 600, height : 400, data:data, shadow:true, shadow_color:‘#15353a‘, shadow_blur:8, background_color : ‘#FFFFFF‘, gradient:true,//开启渐变 color_factor:0.28, gradient_mode:‘RadialGradientOutIn‘, showpercent:true, decimalsnum:0, /*legend:{ offsetx:50, offsety:-50, enable:true, padding:100, color:‘#000000‘, border:{ width:[0,0,0,0], color:‘#343b3e‘ }, background_color : null, },*/ sub_option:{ border:{ enable:false }, label : { sign:true, fontsize:14, color:‘#000000‘ }, listeners:{ parseText:function(d, t){ return d.get(‘name‘)+"("+ d.get(‘Count‘)+")"+" "+d.get(‘value‘); } } }, //border:{ //width:[0,20,0,20], //color:‘#1e2223‘ //} }); chart.bound(0); }); </script> </head> <body> <div id=‘canvasDiv‘></div> </body> </html>
自制堆积百分比:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ichart.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="ichart/ichart.1.2.min.js"></script>
<script type="text/javascript">
$(function(){
var data = [
{
name : ‘Completed‘,
value:[10/(10+20+30+40),20/(10+20+30+40),10/(10+20+30+40),20/(20+15+35+30),30/(30+25+15+30)],
color:‘#919191‘
},
{
name : ‘Progress‘,
value:[20/(10+20+30+40),10/(10+20+30+40),30/(10+20+30+40),15/(20+15+35+30),25/(30+25+15+30)],
color:‘#00bb00‘
},
{
name : ‘Delay‘,
value:[30/(10+20+30+40),30/(10+20+30+40),40/(10+20+30+40),35/(20+15+35+30),15/(30+25+15+30)],
color:‘#FF0000‘
},
{
name : ‘Pending‘,
value:[40/(10+20+30+40),40/(10+20+30+40),20/(10+20+30+40),30/(20+15+35+30),30/(30+25+15+30)],
color:‘#f0f0f0‘
}
];
var chart = new iChart.BarStacked2D({
render : ‘canvasDiv‘,
data: data,
labels:["DTV","4K5K","HDTV","MFM","Monitor"],
title : {
//text:‘Total U.S Retail Software Revenue‘,
width:400,
align:‘left‘,
background_color : ‘#495998‘,
color:‘#c0c8e7‘
},
subtitle : {
//text:‘Showing Jan-Sep Share,2012 Estimated‘,
width:280,
height:20,
fontsize:12,
align:‘left‘,
color:‘#c0c8e7‘
},
padding:10,
//footnote : ‘数据来源：互联网‘,
width : 800,
color:‘#000000‘,
percent:true,
height : 400,
bar_height:20,
background_color : ‘#ffffff‘,
shadow : true,
shadow_blur : 2,
shadow_color : ‘#aaaaaa‘,
shadow_offsetx : 1,
shadow_offsety : 0,
sub_option:{
label:{color:‘#ffffff‘,fontsize:12,fontweight:600},
border : {
width : 2,
color : ‘#d3d4f0‘
}
},
label:{color:‘#000000‘,fontsize:12,fontweight:600},
showpercent:true,
decimalsnum:0,
legend:{
enable:true,
background_color : null,
line_height:25,
color:‘#000000‘,
fontsize:12,
fontweight:600,
offsetx: 20,
border : {
enable : false
}
},
coordinate:{
background_color : 0,
axis : {
color : ‘#c0c8e7‘,
width : 0
},
scale:[{
position:‘bottom‘,
scale_enable : false,
start_scale:0,
scale_space:20,
end_scale:100,
label:{color:‘#000000‘,fontsize:11,fontweight:600},
listeners:{
parseText:function(t,x,y){
return {text:t}
}
}
}],
width:600,
height:260
}
});
//利用自定义组件构造左侧说明文本
chart.plugin(new iChart.Custom({
drawFn:function(){
//计算位置
var coo = chart.getCoordinate(),
x = coo.get(‘originx‘),
y = coo.get(‘originy‘),
h = coo.height;
//在左下侧的位置，渲染一个单位的文字
chart.target.textAlign(‘start‘)
.textBaseline(‘bottom‘)
.textFont(‘600 11px Verdana‘)
//.fillText(‘Billions‘,x-20,y+h+30,false,‘#a8b2d7‘);
}
}));
chart.draw();
});
</script>
</head>
<body>
<div id=‘canvasDiv‘></div>
</body>
</html>
以上是关于自制ichartjs饼图的主要内容，如果未能解决你的问题，请参考以下文章