HTML5之SVG饼状图百分比进度代码

来源:https://www.sucaihuo.com/js/3109.html 2017-09-29 15:07浏览(2244) 收藏

一款HTML5之SVG饼状图百分比进度代码,
HTML5之SVG饼状图百分比进度代码
分类:统计图 > 饼状图 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入两个CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="css/jquery-pie-loader.css">

页面的body部分,在section容器里放了多个figure标签,代码如下:

<section class="container">
	<figure id="pie" data-behavior="pie-chart"></figure>
	<figure id="pie2" data-behavior="pie-chart"></figure>
	<figure id="pie3" data-behavior="pie-chart"></figure>
	<figure id="pie4" data-behavior="pie-chart"></figure>
	<figure id="pie5" data-behavior="pie-chart"></figure>
	<figure id="pie6" data-behavior="pie-chart"></figure>
	<figure id="pie7" data-behavior="pie-chart"></figure>
	<figure id="pie8" data-behavior="pie-chart"></figure>
</section>

页面的底部,需引入jQuery库和饼状图插件,并设置好相应参数,代码如下:

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-pie-loader.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	var rand = function() {
		return Math.floor((Math.random() * 100) + 1)
	}

	$('*[data-behavior="pie-chart"]').each(function() {
		$(this).svgPie({percentage: rand()});
	});
	
});
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2