CSS、SVG、Canvas制作饼图
2020-08-07 本文已影响0人
IT姑凉
实现
一、CSS
1、border实现饼图
限于占比1/4，1/2，3/4需求的饼图可以这样实现
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图 - border</title>
<style>
.demo,.pie{
display:inline-block;
margin:30px;
width:0;
height:0;
border-width:50px;
border-style:solid;
position:relative;
}
.demo{
border-color:red yellow blue green;
}
.rotate{
transform: rotate(45deg);
}
.borderRadius{
border-radius:50%;
}
.pie{
border-radius:50%;
transform: rotate(45deg);
}
.pie::before {
position:absolute;
top:-50px;
left:-50px;
content: '';
display: block;
width:100px;
height: 100px;
background-color: transparent;
border-radius:50%;
border:2px solid orange;
box-sizing: border-box;
}
.p-25{
border-color:orange white white white;
}
.p-50{
border-color:orange orange white white;
}
.p-75{
border-color:orange orange orange white;
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo rotate"></div>
<div class="demo rotate borderRadius"></div>
<div class="pie p-25"></div>
<div class="pie p-50"></div>
<div class="pie p-75"></div>
</body>
</html>
2、background锥形渐变 conic-gradient
锥形渐变实现出来好像不是整1/4的边边会有点锯齿，如果不在乎这点可以选择这种方式
锥形渐变
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图 - 锥形渐变conic-gradient</title>
<style>
.pie {
display:inline-block;
margin:30px;
width: 100px;
height: 100px;
border-radius: 50%;
}
.p1{
background: conic-gradient(orange 25%, #655 0);
}
.p2{
background: conic-gradient(orange 45%, #655 0);
}
.p3{
background: conic-gradient(orange 80%, #655 0);
}
.p4{
background: conic-gradient(orange 60%, #655 0);
}
.p10{
background: conic-gradient(red, orange, yellow, green, teal, blue, purple, red);
}
.p11{
background: conic-gradient(red 20%, orange 20%, orange 30%, #655 0);
}
.p12{
background: conic-gradient(red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%,#655 0);
}
.p13{
background: conic-gradient(red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%,green 60%, green 70%,#655 0);
}
.p14{
background: conic-gradient(red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%,green 60%, green 70%,teal 70%, teal 85%,#655 0);
}
</style>
</head>
<body>
<h4>两色多比例</h4>
<div class="pie p1"></div>
<div class="pie p2"></div>
<div class="pie p3"></div>
<div class="pie p4"></div>
<h4>多色多比例</h4>
<div class="pie p10"></div>
<div class="pie p11"></div>
<div class="pie p12"></div>
<div class="pie p13"></div>
<div class="pie p14"></div>
</body>
</html>
3、background线性渐变旋转叠加
左侧为基础，右侧旋转部分为叠加块，可以通过调整叠加块的背景色及角度实现不同占比的饼图，小于1/2背景色调整为棕色，大于1/2背景色调整为橘色
现在实现的是静态的饼图，可以添加些动画效果，让图形更生动
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图 - 线性渐变linear-gradient</title>
<style>
.pie1{
display:inline-block;
margin:30px;
width: 100px;
height: 100px;
border-radius: 50%;
margin:30px;
background: #5d4747;
background-image: linear-gradient(to right, transparent 50%, orange 0);
}
.pie1::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
transform-origin: left;
transform: rotate(180deg);
}
.p1-45::before,.p1-90::before,.p1-135::before,.p1-180::before {
background-color: inherit;
}
.p1-225::before,.p1-270::before,.p1-315::before{
background-color: orange;
}
.p1-45::before ,.p1-225::before{
transform: rotate(45deg);
}
.p1-90::before,.p1-270::before {
transform: rotate(90deg);
}
.p1-135::before,.p1-315::before {
transform: rotate(135deg);
}
.p1-180::before {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="pie1 p1-45"></div>
<div class="pie1 p1-90"></div>
<div class="pie1 p1-135"></div>
<div class="pie1 p1-180"></div>
<div class="pie1 p1-225"></div>
<div class="pie1 p1-270"></div>
<div class="pie1 p1-315"></div>
</body>
</html>
二、SVG
利用 stroke-dasharray 属性实现
stroke-dasharray:30 10; //虚线是30的长度加上10的边距，
虚线宽度：设置为当前圆周长*占比
边距设置：设置为一个大于或等于我们当前圆的周长的边距
（计算周长：C = 2πr, 所以在这里 C = 2π × 50 ≈ 314）
基本实现
占比的扇形比圆形半径大一点点
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG饼图</title>
<style>
svg{
display:inline-block;
margin:30px;
border-radius:50%; // 隐藏露在外边的stroke
transform: rotate(-90deg); //逆时针旋转90°让起点在顶部中间
}
circle {
fill: #655;
stroke: orange;
stroke-width: 100;
}
.c1{
stroke-dasharray: 30 314;
}
.c2{
stroke-dasharray: 75 314;
}
.c3{
stroke-dasharray: 140 314;
}
.c4{
stroke-dasharray: 270 314;
}
</style>
</head>
<body>
<svg width="100" height="100">
<circle r="50" cx="50" cy="50" class="c1"/>
</svg>
<svg width="100" height="100">
<circle r="50" cx="50" cy="50" class="c2"/>
</svg>
<svg width="100" height="100">
<circle r="50" cx="50" cy="50" class="c3"/>
</svg>
<svg width="100" height="100">
<circle r="50" cx="50" cy="50" class="c4"/>
</svg>
<svg width="104" height="104">
<circle r="50" cx="52" cy="52" class="c1"/>
</svg>
<svg width="104" height="104">
<circle r="50" cx="52" cy="52" class="c2"/>
</svg>
<svg width="104" height="104">
<circle r="50" cx="52" cy="52" class="c3"/>
</svg>
<svg width="104" height="104">
<circle r="50" cx="52" cy="52" class="c4"/>
</svg>
</body>
</html>
