Skip to content

Commit 6fb5fc1

Browse files
JhostinDJhostinD
committed
Añadidos gráficos sin modificar
1 parent dd8548a commit 6fb5fc1

File tree

4 files changed

+208
-1
lines changed

4 files changed

+208
-1
lines changed

‎PlantillaBasica/EstadisticaVideojuego.html‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
66
<meta name="description" content="" />
77
<meta name="author" content="" />
8-
<title>Modern Business - Start Bootstrap Template</title>
8+
<title>GameLink</title>
99
<!-- Favicon-->
1010
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
1111
<!-- Bootstrap icons-->
@@ -46,6 +46,34 @@
4646
</nav>
4747
<!--Page content-->
4848
<section class="py-5">
49+
<!--Gráficos-->
50+
<div class="container px-5 mb-5">
51+
<h2 class="fw-bolder fs-5 mb-4">Gráficos</h2>
52+
<div class="row gx-5 align-items-center">
53+
<div class="chart-wrap horizontal"> <!-- quitar el estilo "horizontal" para visualizar verticalmente -->
54+
<div class="grid">
55+
<div class="bar" style="--bar-value:85%;" data-name="Your Blog" title="Your Blog 85%"></div>
56+
<div class="bar" style="--bar-value:23%;" data-name="Medium" title="Medium 23%"></div>
57+
<div class="bar" style="--bar-value:7%;" data-name="Tumblr" title="Tumblr 7%"></div>
58+
<div class="bar" style="--bar-value:38%;" data-name="Facebook" title="Facebook 38%"></div>
59+
<div class="bar" style="--bar-value:35%;" data-name="YouTube" title="YouTube 35%"></div>
60+
<div class="bar" style="--bar-value:30%;" data-name="LinkedIn" title="LinkedIn 30%"></div>
61+
<div class="bar" style="--bar-value:5%;" data-name="Twitter" title="Twitter 5%"></div>
62+
<div class="bar" style="--bar-value:20%;" data-name="Other" title="Other 20%"></div>
63+
</div>
64+
</div>
65+
66+
<div class="grafico">
67+
<div class="sombra"></div>
68+
<div id="porcion1" class="recorte"><div class="quesito" data-rel="70"></div></div>
69+
<div id="porcion2" class="recorte"><div class="quesito" data-rel="120"></div></div>
70+
<div id="porcion3" class="recorte"><div class="quesito" data-rel="25"></div></div>
71+
<div id="porcionFin" class="recorte"><div class="quesito" data-rel="145"></div></div>
72+
</div>
73+
74+
</div>
75+
</div>
76+
<!--Videojuegos más comprados-->
4977
<div class="container px-5">
5078
<h2 class="fw-bolder fs-5 mb-4">Videojuegos más comprados</h2>
5179
<div class="row gx-5">
@@ -119,6 +147,7 @@ <h2 class="fw-bolder fs-5 mb-4">Videojuegos más comprados</h2>
119147
</a>
120148
</div>
121149
</div>
150+
<!--Videojuegos populares-->
122151
<div class="container px-5">
123152
<h2 class="fw-bolder fs-5 mb-4">Videojuegos Populares</h2>
124153
<div class="row gx-5">

‎PlantillaBasica/Fotos/grafico1.png‎

44.2 KB
Loading

‎PlantillaBasica/Fotos/grafico2.png‎

61.6 KB
Loading

‎PlantillaBasica/css/styles.css‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11392,4 +11392,182 @@ form{
1139211392
margin-bottom:-30px;
1139311393
font-size: 13px;
1139411394
margin-top:20px;
11395+
}
11396+
11397+
/* Para el primer gráfico de barras*/
11398+
.chart-wrap {
11399+
--chart-width:420px;
11400+
--grid-color:#aaa;
11401+
--bar-color:#30B0D5;
11402+
--bar-thickness:40px;
11403+
--bar-rounded: 3px;
11404+
--bar-spacing:10px;
11405+
11406+
font-family:sans-serif;
11407+
width:var(--chart-width);
11408+
}
11409+
11410+
.chart-wrap .title{
11411+
font-weight:bold;
11412+
padding:1.8em 0;
11413+
text-align:center;
11414+
white-space:nowrap;
11415+
}
11416+
11417+
/* cuando definimos el gráfico en horizontal, lo giramos 90 grados */
11418+
.chart-wrap.horizontal .grid{
11419+
transform:rotate(-90deg);
11420+
}
11421+
11422+
.chart-wrap.horizontal .bar::after{
11423+
/* giramos las letras para horizontal*/
11424+
transform: rotate(45deg);
11425+
padding-top:0px;
11426+
display: block;
11427+
}
11428+
11429+
.chart-wrap .grid{
11430+
margin-left:50px;
11431+
position:relative;
11432+
padding:5px 0 5px 0;
11433+
height:100%;
11434+
width:100%;
11435+
border-left:2px solid var(--grid-color);
11436+
}
11437+
11438+
/* posicionamos el % del gráfico*/
11439+
.chart-wrap .grid::before{
11440+
font-size:0.8em;
11441+
font-weight:bold;
11442+
content:'0%';
11443+
position:absolute;
11444+
left:-0.5em;
11445+
top:-1.5em;
11446+
}
11447+
.chart-wrap .grid::after{
11448+
font-size:0.8em;
11449+
font-weight:bold;
11450+
content:'100%';
11451+
position:absolute;
11452+
right:-1.5em;
11453+
top:-1.5em;
11454+
}
11455+
11456+
/* giramos las valores de 0% y 100% para horizontal */
11457+
.chart-wrap.horizontal .grid::before, .chart-wrap.horizontal .grid::after {
11458+
transform: rotate(90deg);
11459+
}
11460+
11461+
.chart-wrap .bar {
11462+
width: var(--bar-value);
11463+
height:var(--bar-thickness);
11464+
margin:var(--bar-spacing) 0;
11465+
background-color:var(--bar-color);
11466+
border-radius:0 var(--bar-rounded) var(--bar-rounded) 0;
11467+
}
11468+
11469+
.chart-wrap .bar:hover{
11470+
opacity:0.7;
11471+
}
11472+
11473+
.chart-wrap .bar::after{
11474+
content:attr(data-name);
11475+
margin-left:100%;
11476+
padding:10px;
11477+
display:inline-block;
11478+
white-space:nowrap;
11479+
}
11480+
11481+
/*Para el gráfico circular*/
11482+
* {
11483+
box-sizing: border-box;
11484+
}
11485+
.grafico {
11486+
height: 400px;
11487+
margin: 1rem auto;
11488+
position: relative;
11489+
width: 400px;
11490+
}
11491+
.recorte {
11492+
border-radius: 50%;
11493+
clip: rect(0px, 400px, 400px, 200px);
11494+
height: 100%;
11495+
position: absolute;
11496+
width: 100%;
11497+
}
11498+
.quesito {
11499+
border-radius: 50%;
11500+
clip: rect(0px, 200px, 400px, 0px);
11501+
height: 100%;
11502+
position: absolute;
11503+
width: 100%;
11504+
font-family: monospace;
11505+
font-size: 1.5rem;
11506+
}
11507+
.sombra {
11508+
background-color: #fff;
11509+
border-radius: 50%;
11510+
box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
11511+
border: 5px solid #000;
11512+
height: 100%;
11513+
position: absolute;
11514+
width: 100%;
11515+
}
11516+
11517+
#porcion1 {
11518+
transform: rotate(0deg);
11519+
}
11520+
11521+
#porcion1 .quesito {
11522+
background-color: rgba(0,0,255,.7);
11523+
transform: rotate(70deg);
11524+
}
11525+
#porcion2 {
11526+
transform: rotate(70deg);
11527+
}
11528+
#porcion2 .quesito {
11529+
background-color: rgba(255,255,0,.7);
11530+
transform: rotate(120deg);
11531+
}
11532+
#porcion3 {
11533+
transform: rotate(-170deg);
11534+
}
11535+
#porcion3 .quesito {
11536+
background-color: rgba(0,128,0,.7);
11537+
transform: rotate(25deg);
11538+
}
11539+
#porcionFin {
11540+
transform:rotate(-145deg);
11541+
}
11542+
#porcionFin .quesito {
11543+
background-color: rgba(255,0,0,.7);
11544+
transform: rotate(145deg);
11545+
}
11546+
#porcion1 .quesito:after {
11547+
content: attr(data-rel);
11548+
left: 25%;
11549+
line-height: 5;
11550+
position: absolute;
11551+
top: 0;
11552+
transform: rotate(-70deg);
11553+
}
11554+
#porcion2 .quesito:after {
11555+
content: attr(data-rel);
11556+
left: 15%;
11557+
position: absolute;
11558+
top: 30%;
11559+
transform: rotate(-190deg);
11560+
}
11561+
#porcion3 .quesito:after {
11562+
content: attr(data-rel);
11563+
left: 35%;
11564+
position: absolute;
11565+
top: 4%;
11566+
transform: rotate(70deg);
11567+
}
11568+
#porcionFin .quesito:after {
11569+
content: attr(data-rel);
11570+
left: 10%;
11571+
position: absolute;
11572+
top: 30%;
1139511573
}

0 commit comments

Comments
 (0)