jQuery响应式数据可视化图表比萨派饼图 - 踏得网

ZURB公司创建的比萨派数据可视化图表（如右边的圆饼和圆环状图）。参考链接： http://zurb.com/playground/pizza-pie-charts

pie,chart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 6382
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<link rel="stylesheet" type="text/css" href="https://zurb.com/playground/assets/application-91324b39eedf9d9732a06e4cc1e971b6.css">
<script src="https://zurb.com/playground/uploads/upload/upload/301/snapsvg.min.js"></script>
<script src="https://zurb.com/playground/uploads/upload/upload/320/pizza.js"></script>
<div class="row">
	<div class="large-8 columns">
		<div class="row graphs">
			<div class="large-6 columns">
				<div class="row">
					<div class="large-2 small-4 columns">
						<ul data-pie-id="example1">
						<li data-value="60">Water Buffalo</li>
						<li data-value="20">Bison</li>
						<li data-value="12">Sheep</li>
						<li data-value="32">Goat</li>
						<li data-value="50">Shetland Pony</li>
						</ul>
					</div>
					<div class="large-10 small-8 columns">
						<div id="example1"></div>
					</div>
				</div>
			</div>
	<div class="large-6 columns">
		<div class="row">
		<div class="large-2 small-4 columns">
			<ul data-pie-id="example2" data-options='{"donut":"true"}'>
			<li data-value="60">Pepperoni</li>
			<li data-value="20">Sausage</li>
			<li data-value="12">Cheese</li>
			<li data-value="32">Mushroom</li>
			<li data-value="50">Chicken</li>
			<li data-value="24">Other</li>
			</ul>
		</div>
		<div class="large-10 small-8 columns">
			<div id="example2"></div>
		</div>
	</div>
</div>