CSS - Barras estadisticas

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 !

<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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

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.

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:

http://www.flotcharts.org/
http://morrisjs.github.io/morris.js/

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar