CSS - Barras estadisticas

   
Vista:

Barras estadisticas

Publicado por Jose (3 intervenciones) el 22/05/2015 18:44:57
Buenos días.

Es que necesito hacer unas barras estadisticas y lo quiero hacer con html y css, lo que pasa es que las barras me salen de forma horizontal por que las estoy haciendo en una barra de navegación, como hago para pasarlas de forma horizontal a vertical o que otra solución me pueden dar, les voy a copiar el codigo que tengo espero me ayuden ya que soy algo nuevo en el tema. Muchas gracias !

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
	<head>
		<style type="text/css">
			div.estadisticas ul {
				width: 400px;
				list-style: none;
			}
			div.estadisticas .porciento {
				display: inline-block;
				height: 1.5em;
				line-height: 1.5em;
				margin: 5px 10px;
				padding: 0 5px;
				text-align: right;
				color: black;
				font-weight: bold;
				font-family: monospace;
				-moz-border-radius: 5px;
				border-bottom: 1px solid #aaa;
				border-right: 1px solid #aaa;
				cursor: default;
				float: left;
			}
			.v50 {
				background: #eaff00; 
				width: 100%;
				height:50px;
			}
 
			.v20 {
				background: #D8D8D8; 
				width: 50%;
				height:50px;
			}
		</style>
 
	</head>
	<body>
		<center>
			<div class="estadisticas">
				<ul>
					<li>Ingresaron: &nbsp;: <span class="porciento v50">100%</span></li>
					<li>Ganarón: &nbsp;: <span class="porciento v20">50%</span></li>
				</ul>
			</div>
		</center>
	</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel Komander

Barras estadisticas

Publicado por Angel Komander (54 intervenciones) el 22/05/2015 21:06:24
tendras k empezar a hacerlo de nuevo amigo, ya que con Transform no se puede, queda mal >_<
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Barras estadisticas

Publicado por Maxi (2 intervenciones) el 23/05/2015 10:39:25
Te recomiendo que uses un plug un librería para gráficos de barras. De todas maneras te dejo un ejemplo de como podrías hacer para mostrar tus barras verticales.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<html>
    <head>
        <title>Barras verticales</title>
        <style type="text/css">
            @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
            body {
                font-family: 'Open Sans', sans-serif;
            }
 
            .chart {
                clear: both;
                padding: 0;
                width: 100%;
            }
            @media (min-width: 700px) {
                .chart {
                    background: url("http://cl.ly/QSpc/bg-chart.png") right top repeat-x;
                    height: 425px;
                    margin: 0 auto emCalc(-32px);
                }
            }
            .chart li {
                display: block;
                height: 125px;
                padding: emCalc(25px) 0;
                position: relative;
                text-align: center;
                vertical-align: bottom;
                -moz-border-radius: 4px 4px 0 0;
                -webkit-border-radius: 4px;
                border-radius: 4px 4px 0 0;
                -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
                -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
                box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
            }
            @media (min-width: 700px) {
                .chart li {
                    display: inline-block;
                    height: 425px;
                    margin: 0 1.8% 0 0;
                    width: 15%;
                }
            }
            .chart .axis {
                display: none;
                top: emCalc(-45px);
                width: 8%;
            }
            @media (min-width: 700px) {
                .chart .axis {
                    display: inline-block;
                }
            }
            .chart .label {
                background: #cccccc;
                margin: -9px 0 71px 0;
            }
            .chart .percent {
                letter-spacing: -3px;
                opacity: .4;
                width: 100%;
                font-size: 30px;
                font-size: 1.875rem;
            }
            @media (min-width: 700px) {
                .chart .percent {
                    position: absolute;
                    font-size: 62px;
                    font-size: 3.875rem;
                }
            }
            .chart .percent span {
                font-size: 30px;
                font-size: 1.875rem;
            }
            .chart .skill {
                font-weight: 800;
                opacity: .5;
                overflow: hidden;
                text-transform: uppercase;
                width: 100%;
                font-size: 14px;
                font-size: 0.875rem;
            }
            @media (min-width: 700px) {
                .chart .skill {
                    bottom: 20px;
                    position: absolute;
                    font-size: 16px;
                    font-size: 1rem;
                }
            }
            .chart .teal {
                background: #4ecdc4;
                border: 1px solid #4ecdc4;
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc2ZDhkMSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjNGVjZGM0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
                background-size: 100%;
                background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #76d8d1), color-stop(70%, #4ecdc4));
                background-image: -moz-linear-gradient(#76d8d1, #4ecdc4 70%);
                background-image: -webkit-linear-gradient(#76d8d1, #4ecdc4 70%);
                background-image: linear-gradient(#76d8d1, #4ecdc4 70%);
            }
            .chart .salmon {
                background: #ff6b6b;
                border: 1px solid #ff6b6b;
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmOWU5ZSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZmY2YjZiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
                background-size: 100%;
                background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff9e9e), color-stop(70%, #ff6b6b));
                background-image: -moz-linear-gradient(#ff9e9e, #ff6b6b 70%);
                background-image: -webkit-linear-gradient(#ff9e9e, #ff6b6b 70%);
                background-image: linear-gradient(#ff9e9e, #ff6b6b 70%);
            }
            .chart .lime {
                background: #97f464;
                border: 1px solid #97f464;
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3Zjc5NCIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjOTdmNDY0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
                background-size: 100%;
                background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b7f794), color-stop(70%, #97f464));
                background-image: -moz-linear-gradient(#b7f794, #97f464 70%);
                background-image: -webkit-linear-gradient(#b7f794, #97f464 70%);
                background-image: linear-gradient(#b7f794, #97f464 70%);
            }
            .chart .peach {
                background: #ffcd92;
                border: 1px solid #ffcd92;
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTRjNSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZmZjZDkyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
                background-size: 100%;
                background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffe4c5), color-stop(70%, #ffcd92));
                background-image: -moz-linear-gradient(#ffe4c5, #ffcd92 70%);
                background-image: -webkit-linear-gradient(#ffe4c5, #ffcd92 70%);
                background-image: linear-gradient(#ffe4c5, #ffcd92 70%);
            }
            .chart .grape {
                background: #ab64f4;
                border: 1px solid #ab64f4;
                background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1OTRmNyIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjYWI2NGY0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
                background-size: 100%;
                background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c594f7), color-stop(70%, #ab64f4));
                background-image: -moz-linear-gradient(#c594f7, #ab64f4 70%);
                background-image: -webkit-linear-gradient(#c594f7, #ab64f4 70%);
                background-image: linear-gradient(#c594f7, #ab64f4 70%);
            }
        </style>
 
    </head>
    <body>
        <ul class="chart">
            <li class="axis">
                <div class="label">100%</div>
                <div class="label">80%</div>
                <div class="label">60%</div>
                <div class="label">40%</div>
                <div class="label">20%</div>
                <div class="label">0%</div>
            </li>
            <li class="bar teal" style="height: 100%;" title="100">
                <div class="percent">100<span>%</span></div>
                <div class="skill">Ingresaron</div>
            </li>
            <li class="bar salmon" style="height: 50%;" title="50">
                <div class="percent">50<span>%</span></div>
                <div class="skill">Ganaron</div>
            </li>
        </ul>
    </body>
</html>

El ejemplo lo obtuve de esta web:
http://geoffgraham.me/creating-a-responsive-css-bar-chart/

Aquí te dejo unos links con las librerías de gráficos más usadas:

Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar