bendtherules/opencharts
1
0
Fork 0
mirror of https://github.com/bendtherules/opencharts.git synced 2026-08-18 13:52:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pie chart added

Browse Source
This commit is contained in:
bendtherules
2014-03-27 02:03:55 -07:00
parent 65cc769461
commit e7f894ad9b
5 changed files with 208 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pie/pie-1.css
-80
View File
@@ -1,80 +0,0 @@
html,body{
width: 100%;
height: 100%;
}
body{
position: relative;
margin: 0;
}
.wrapper{
}
.pie-part{
position: absolute;
width: 200px;
height: 100px;
left: 200px;
top: 200px;
background-color: green;
border-top-right-radius: 50% 100%;
border-top-left-radius: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.part-1{
background-color: rgb(200,50,255);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
z-index: 1;
}
.part-2{
background-color: rgb(150,100,255);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
z-index: 2;
}
.part-3{
background-color: rgb(100,150,255);
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-ms-transform: rotate(150deg);
-o-transform: rotate(150deg);
transform: rotate(150deg);
z-index: 3;
}
.part-4{
background-color: rgb(50,200,255);
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
z-index: 4;
left: 0;
top:-100px;
}
.clipper{
overflow: hidden;
position: absolute;
left: 200px;
top: 300px;
width: 200px;
height: 100px;
}
pie/pie-1.html
-21
View File
@@ -1,21 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS PIE Chart</title>
<link rel="stylesheet" href="./pie-1.css">
</head>
<body>
<div class="wrapper">
<div class="pie-part part-1"></div>
<div class="pie-part part-2"></div>
<div class="pie-part part-3"></div>
<div class="clipper">
<div class="pie-part part-4"></div>
</div>
</div>
</body>
</html>
pie/pie.css
+91
View File
@@ -0,0 +1,91 @@
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
text-align: center;
}
.pie-chart {
position: absolute;
width: 50vh;
height: 50vh;
left: 25vh;
top: 25vh;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
}
.pie-part {
width: 100%;
height: 50%;
position: absolute;
}
.pie-part .part-inner {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #008000;
border-top-right-radius: 50% 100%;
border-top-left-radius: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
clipper,
.part-4 {
overflow: hidden;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 50%;
}
clipper-inner,
.part-4 .part-inner {
left: 0;
top: -100%;
}
.part-1 .part-inner {
background-color: #c832ff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
z-index: 1;
}
.part-2 .part-inner {
background-color: #9664ff;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
z-index: 2;
}
.part-3 .part-inner {
background-color: #6496ff;
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-ms-transform: rotate(150deg);
-o-transform: rotate(150deg);
transform: rotate(150deg);
z-index: 3;
}
.part-4 .part-inner {
background-color: #32c8ff;
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
z-index: 4;
}
pie/pie.html
+30
View File
@@ -0,0 +1,30 @@
<!doctype html>
<html lang="en">
<!-- generate html and css according to degrees list -->
<head>
<meta charset="UTF-8">
<title>CSS PIE Chart</title>
<link rel="stylesheet" href="./pie.css">
</head>
<body>
<div class="pie-chart">
<div class="wrapper">
<div class="pie-part part-1">
<div class="part-inner"></div>
</div>
<div class="pie-part part-2">
<div class="part-inner"></div>
</div>
<div class="pie-part part-3">
<div class="part-inner"></div>
</div>
<div class="pie-part part-4">
<div class="part-inner"></div>
</div>
</div>
</div>
</body>
</html>
pie/pie.styl
+87
View File
@@ -0,0 +1,87 @@
full=100%
half=50%
html,body{
width: 100%;
height: 100%;
}
body{
margin: 0;
text-align center
}
.pie-chart{
position absolute
width 50vh
height 50vh
left 25vh
top 25vh
}
.wrapper
position relative
width full
height full
.pie-part
width full
height half
position absolute
.pie-part
.part-inner
position: absolute;
width: full
height: full
left: 0
top: 0
background-color: green;
border-top-right-radius: 50% 100%;
border-top-left-radius: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
clipper{
overflow: hidden;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 50%;
}
clipper-inner
left 0
top -100%
transform()
-webkit-transform arguments
-moz-transform arguments
-ms-transform arguments
-o-transform arguments
transform arguments
angles=(0 120 150 220)
angles_sum=null
colors= rgb(200, 50, 255) rgb(150, 100, 255) rgb(100, 150, 255) rgb(50, 200, 255)
for count in 1..4
col=colors[(count - 1)]
angle=angles[(count - 1)]
if angles_sum is not defined
angles_sum=angle
else
angles_sum+=angle
.part-{count}
.part-inner
background-color col
transform rotate(angle deg)
z-index count
if angles_sum>180
.part-{count}
@extend clipper
.part-inner
@extend clipper-inner