html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>JS radial chart</title>
</head>
<body>
<!--
<div class="radial-progress-wrapper">
<div class="radial-progress-mask">
<div class="radial-progress-back"></div>
</div>
<div class="radial-progress-mask">
<div class="radial-progress-back"></div>
</div>
</div>
-->
<div class="radial-chart">
<div class="radial-pie-wrapper">
<div class="radial-pie-mask">
<div class="radial-pie-back"></div>
</div>
<div class="radial-pie-mask">
<div class="radial-pie-back"></div>
</div>
<div class="radial-pie-mask">
<div class="radial-pie-back"></div>
</div>
<div class="radial-pie-label">60°</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
width:100vw;
min-height:100vh;
background: gainsboro;
flex-wrap:wrap;
}
.radial-chart {
position:relative;
width:30vmin;
height:30vmin;
border:3px solid black;
border-radius:50%;
background: white;
margin:1vmin;
font-size:2vmin;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
<div class="radial-chart">
<div class="radial-pie-wrapper">
<div class="radial-pie-mask">
<div class="radial-pie-back"></div>
</div>
<div class="radial-pie-mask">
<div class="radial-pie-back"></div>
</div>
</div>
</div>
*/
onload = function() {
var rc = new RadialChart(null,'50vmin',0,'red',null);
document.body.appendChild(rc.ref);
var p = new RadialPie(rc,225,30,'30°','limegreen');
var rc1 = new RadialChart(null,'15vmin');
document.body.appendChild(rc1.ref);
var p0 = new RadialPie(rc1,-45,45,'45°','red');
var rc2 = new RadialChart();
document.body.appendChild(rc2.ref);
var p1 = new RadialPie(rc2,45,120,'120°','limegreen');
var p2 = new RadialPie(rc2,165,120,'120°','royalblue');
var p3 = new RadialPie(rc2,285,120,'120°','orange');
// console.log('=====');
var rc3 = new RadialChart([1,1,1]);
document.body.appendChild(rc3.ref);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run