mirror of
https://github.com/bendtherules/opencharts.git
synced 2026-08-18 13:52:49 +00:00
Line + Area chart done, directory re-arranged
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
full=100%
|
||||
half=50%
|
||||
*
|
||||
-webkit-box-sizing border-box
|
||||
-moz-box-sizing border-box
|
||||
box-sizing border-box
|
||||
|
||||
.chart
|
||||
width 50vw
|
||||
height 50vh
|
||||
margin 25vh 25vw
|
||||
background-color lightgreen
|
||||
position relative
|
||||
|
||||
.chart-container
|
||||
width full
|
||||
height full
|
||||
|
||||
axis-thick=1em
|
||||
axis-line-thick=.25em
|
||||
.axis
|
||||
width full
|
||||
height full
|
||||
position absolute
|
||||
z-index 4
|
||||
|
||||
.axis-x
|
||||
.axis-y
|
||||
position absolute
|
||||
background-color lightgray
|
||||
|
||||
.axis-y
|
||||
width axis-thick
|
||||
height full
|
||||
|
||||
.axis-line
|
||||
left half
|
||||
|
||||
.axis-line-container
|
||||
margin 0 -0.5*axis-line-thick
|
||||
height full
|
||||
width axis-line-thick
|
||||
|
||||
|
||||
.axis-x
|
||||
height axis-thick
|
||||
width full
|
||||
bottom 0
|
||||
|
||||
.axis-line
|
||||
top 50%
|
||||
|
||||
.axis-line-container
|
||||
margin -0.5*axis-line-thick 0
|
||||
height axis-line-thick
|
||||
width full
|
||||
|
||||
.axis-line
|
||||
width full
|
||||
height full
|
||||
position absolute
|
||||
z-index 5
|
||||
.axis-line-container
|
||||
background-color black
|
||||
|
||||
.scene
|
||||
position absolute
|
||||
z-index 1
|
||||
background-color green
|
||||
width full
|
||||
height full
|
||||
padding-left axis-thick
|
||||
padding-bottom axis-thick
|
||||
|
||||
.scene-container
|
||||
width full
|
||||
height full
|
||||
background-color lightblue
|
||||
|
||||
count_bar=4
|
||||
p_empty=50%
|
||||
p_bar_m=p_empty/count_bar
|
||||
p_bar_w=(full - p_empty)/count_bar
|
||||
// p_bar=p_bar/count_bar
|
||||
.bar
|
||||
width p_bar_w
|
||||
height full
|
||||
margin 0 (p_bar_m/2)
|
||||
// background-color lightgreen
|
||||
float left
|
||||
position relative
|
||||
|
||||
.bar-inner
|
||||
position absolute
|
||||
bottom 0
|
||||
width full
|
||||
background-color yellow
|
||||
|
||||
//automate this part
|
||||
.part-1
|
||||
.bar-inner
|
||||
height 40%
|
||||
|
||||
.part-2
|
||||
.bar-inner
|
||||
height 65%
|
||||
|
||||
.part-3
|
||||
.bar-inner
|
||||
height 90%
|
||||
|
||||
.part-4
|
||||
.bar-inner
|
||||
height 75%
|
||||
|
||||
.clearfix
|
||||
clear both
|
||||
Reference in New Issue
Block a user