jQuery+HTML5手机端流量统计图表代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+HTML5手机端流量统计图表代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" forua="true" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<title>jQuery+HTML5手机端流量统计图表</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="viewport">

	<div class="wrap pos-rel" id="topD">
		<div class="w-100 text-center pos-abs">
			<img id="topRedBgD" class="img-responsive" src="images/Banner1.png">
		</div>
		<div id="bgD" class="w-100 pos-abs">
			<div class="w-50 pull-left">
				<div class="w-100">
					<div class="flow_chartPie">
						<div id="flow_chartCvs"></div>
						<div class="flow_chartShade">
							<div class="centerData text-center">
								<span class="dis-block ft-10 ft-white">本月已用流量</span>
								<span class="dis-block mrgt-10 ft-12 ft-white">637.00M</span>
							</div>
						</div>
						<div class="dis-block text-center">
							<a class="flow_btn">买流量</a>
						</div>
					</div>
				</div>
			</div>
			<div class="w-50 pull-left">
				<div class="info ft-9 ft-white">
					<i class="dot"></i>
					流量剩余<span class="mrgl-5 ft-12">637.00M</span>
				</div>
				<div class="info ft-9 ft-white">
					<i class="dot"></i>
					流量已用<span class="mrgl-5 ft-12">80.00M</span>
				</div>
				<div class="info ft-9 ft-white">
					<i class="dot"></i>
					当月消费<span class="mrgl-5 ft-12">23.00元</span>
				</div>
				<div class="info ft-9 ft-white">
					<i class="dot"></i>
					当月剩余<span class="mrgl-5 ft-12">80.00元</span>
				</div>
			</div>
		</div>
	</div>
	<div class="clear"></div>
</div>
<script language="javascript" type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="js/raphael.js"></script>
<script language="javascript" type="text/javascript" src="js/config.js"></script>
</body>
</html>

JS代码(config.js):

$(window).load(function(){
	initStyles();
}
);
	$(window).resize(function(){
	initStyles();
	window.location.replace(location);
}
);
	function initStyles(){
	$("#topD").css("height",$("#topRedBgD").height()+"px");
	$("#bgD").css("height",$("#topRedBgD").height()+"px");
	// 设置环状统计报表var viewWidth = $(window).width();
	//屏幕宽度var diameter = viewWidth*0.5;
	// 图标宽度var high = diameter*0.8;
	// 图标高度var radius1 = high/2;
	// 外环半径var radius2 = radius1-10;
	// 内环半径var cx = diameter/2;
	// x轴坐标var cy = high*0.65;
	// y轴坐标dial(60,diameter,high,cx,cy,radius1,radius2,"flow_chartCvs","gradient");
	// 第一个数值即为百分比数值}
function dial(percent,width,height,cx,cy,r1,r2,eleId,colorFlag){
	var paper = Raphael(document.getElementById(eleId),width,height);
	var a = 225 - percent * 270 / 100,a0 = 225;
	var dial_0 = paper.path(doughnut_path(cx,cy,r1,r2,-45,225)).attr({
	"fill":"#FFF","stroke":"none"}
),dial_1 = paper.path(doughnut_path(cx,cy,r1,r2,225,225)).attr({
	"fill":"#FE7E56","stroke":"none"}
);
	if (colorFlag=="gradient"){
	dial_0.attr({
	"fill":"#FFFFFF"}
)dial_1.attr({
	gradient:'#FE7E56','stroke-linejoin':'round',rotation:-90}
);
}
;
	drawTemp();
	function drawTemp(){
	if(a0>a){
	a0--;
	dial_0.attr({
	"path":doughnut_path(cx,cy,r1,r2,-45,a0)}
);
	dial_1.attr({
	"path":doughnut_path(cx,cy,r1,r2,a0-1,225)}
);
	setTimeout(drawTemp,1);
}
}
function doughnut_path(cx,cy,r1,r2,startAngle,endAngle){
	var rad = Math.PI / 180;
	var x1 = cx + r1 * Math.cos(-startAngle * rad),y1 = cy + r1 * Math.sin(-startAngle * rad),x2 = cx + r2 * Math.cos(-startAngle * rad),y2 = cy + r2 * Math.sin(-startAngle * rad),x3 = cx + r2 * Math.cos(-endAngle * rad),y3 = cy + r2 * Math.sin(-endAngle * rad),x4 = cx + r1 * Math.cos(-endAngle * rad),y4 = cy + r1 * Math.sin(-endAngle * rad);
	//四点坐标return ["M",x2,y2,"A",r2,r2,0,+(endAngle - startAngle > 180),0,x3,y3,"L",x4,y4,"A",r1,r1,0,+( endAngle - startAngle > 180),1,x1,y1,"z"];
}
}

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;}
img{border:0 none;vertical-align:middle;}
body{background-color:#F0F0F0;font-family:"微软雅黑","arial,sans-serif";font-size:14px;color:#333;}
.viewport{width:100%;min-width:320px;margin:0 auto;}
.wrap{background-color:#FFF;overflow:hidden;}
.pos-abs{position:absolute;}
.pos-rel{position:relative;}
.pull-left{float:left!important;}
.dis-block{display:block;}
.text-center{text-align:center;}
.w-50{width:50%;}
.w-100{width:100%;}
.img-responsive{display:inline-block;max-width:100%;width:100%;height:auto;}
.ft-9{font-size:.95rem;}
.ft-10{font-size:1rem;}
.ft-12{font-size:1.2rem;}
.ft-white{color:#FFF;}
.mrgt-10{margin-top:10px;}
.mrgl-5{margin-left:5px;}
/*环状图标信息*/
.flow_chartPie{width:100%;margin:6% auto 0;position:relative;}
.flow_chartShade{width:100%;position:absolute;top:40%;left:0;}
.flow_btn{width:100px;color:#FFF;background-color:#F77F5B;display:inline-block;padding:4px 8px;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:50px;}
/*基本信息*/
.info{width:100%;float:left;margin:7% 0;text-align:left;}
.info .dot{width:6px;height:6px;background-color:#FFF;float:left;border-radius:50%;margin:12px 5px 0 0;}
/*自定义响应式*/
/*窄屏手机*/
@media only screen and (max-width:480px){.flow_btn{width:80px;padding:2px 6px;}
.info .dot{margin-top:10px;}
.ft-9{font-size:.85rem;}
.ft-10{font-size:.95rem;}
.ft-12{font-size:1rem;}
}

附件:下载该文件资源,减少时间成本(增值服务)