18041 sujets

Questions générales et questions de débutants

Css graphique statistiques

Bonjour,

Mon projet consiste à afficher des statistiques sur 3 ans: 2006 - 2007 - 2008.
Je me suis donc tourner vers les "barchart".

J'ai commencé un css mais j'ai un soucis avec le texte.
Il est en dessous de l'image et le centrage au milieu ne s'applique pas pour le label dans le css.
Voici une capture de mon soucis:
http://img99.imageshack.us/img99/7528/sanstitrexi.png

Et mes sources:

<!DOCTYPE html>
<html lang="fr">

	<head>
		<title>Statistiques</title>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
		<link rel="stylesheet" title="css" href="css.css" type="text/css" media="screen" />
	</head>

	
	<body>
		<div class="graph">
			<div class="colonne">
				<div class="barre annee1"><label>10</label></div><!--
				--><div class="barre annee2"><label>20</label></div><!--
				--><div class="barre annee3"><label>30</label></div>
			</div><!--
			
			--><div class="colonne">
				<div class="barre annee1"><label>10</label></div><!--
				--><div class="barre annee2"><label>20</label></div><!--
				--><div class="barre annee3"><label>30</label></div>
			</div><!--
			
			--><div class="colonne">
				<div class="barre annee1"><label>10</label></div><!--
				--><div class="barre annee2"><label>20</label></div><!--
				--><div class="barre annee3"><label>30</label></div>
			</div><!--
			
			--><div class="colonne">
				<div class="barre annee1"><label>10</label></div><!--
				--><div class="barre annee2"><label>20</label></div><!--
				--><div class="barre annee3"><label>30</label></div>
			</div>
		</div>
	</body>
</html>





html { 
	background-color: rgba(0, 0, 0, 0.6);
	width: 1250px;
	margin: auto;
}

.graph {

}

.colonne {
	display: inline-block;
	height: 200px;
	line-height: 200px;
	width: 95px;
	background: #FF0000;
	border : 1px solid black;
	padding-left: 5px;
}

.barre {
	display: inline-block;
	border : 1px solid black;
	width: 28px;
	vertical-align: bottom;
}

label {
	text-align: center;
}

.annee1 {
	background: #2201FB;
	height: 50px;
}

.annee2 {
	background: #018FFB;
	height: 100px;
}

.annee3 {
	background: #01F3FB;
	height: 150px;
}


Sauriez vous me dire d'où vient ce décalage du texte?

Cordialement.
Le plus facile est de le faire en image (svg) avec un tableaux en fallback.

P.S. : les <label> ça sert à donner des étiquettes aux éléments de formulaires, rien à faire dans un graphique. Smiley cligne
Modifié par Patidou (22 Aug 2012 - 16:15)
Malheureusement je dois fournir le résultat en HTML/CSS sans passer par des générateurs d'images (jpGraph et autre).
2 questions :

C'est une page fixe ou les donnés sont destinées à être actualisées?

Est-ce que les utilisateurs naviguent avec IE<=8?
<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>statistiques</title>
	<style>
		body {
			font-family: arial, sans-serif;
		}
		table {
			border-collapse: collapse;
			border: 1px solid #000;;
		}
		table.graphique {
			width: 40em
		}
		table.graphique th {
			width: 5em;
		}

		figure .graphique span {
			
		}
		figure .graphique span.w10 {
			width: 10em;
			background-color: yellow;
			display: block;
			float: left;
		}
		figure .graphique span.w20 {
			width: 20em;
			background-color: red;
			display: block;
			float: left;
		}
		figure .graphique span.w30 {
			width: 30em;
			background-color: green;
			display: block;
			float: left;
		}
		
	</style>
</head>
<body>
	<header role="banner" id="banner">
		<h1>statistiques</h1>
	</header>
	<article role="main">
		<header>
			<h2>2006-2008</h2>
		</header>
		<figure>
			<figcaption>graphique</figcaption>
			<table class="graphique">
				<caption>stats de 2006 à 2008</caption>
				<tr>
					<th scope="row">2006</th>
					<td><span class="w10">&nbsp;</span> 10</td>
				</tr>
				<tr>
					<th scope="row">2007</th>
					<td><span class="w20">&nbsp;</span> 20</td>
				</tr>
				<tr>
					<th scope="row">2008</th>
					<td><span class="w30">&nbsp;</span> 30</td>
				</tr>
			</table>
		
		</figure>
		<footer>
			publié le 
		</footer>
	</article>
	<aside role="complementary">
		contenu additionnel
	</aside>
	<footer role="contentinfo">
		copyright
	</footer>
</body>
</html>
Le code html & css un plus optimisé :

<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>statistiques</title>
	<style>
		body {
			font-family: arial, sans-serif;
		}
		table {
			border-collapse: collapse;
			border: 1px solid #000;;
		}
		table.graphique {
			width: 40em
		}
		table.graphique th {
			width: 5em;
		}

		figure .graphique span {
			display: block;
			float: left;
			margin-right: .5em;
		}
		figure .graphique span.w10 {
			width: 10em;
			background-color: yellow;
		}
		figure .graphique span.w20 {
			width: 20em;
			background-color: red;
		}
		figure .graphique span.w30 {
			width: 30em;
			background-color: green;
		}
		figure .graphique thead {
			position: absolute;
			left: -100%;
		}
		
	</style>
</head>
<body>
	<header role="banner" id="banner">
		<h1>statistiques</h1>
	</header>
	<article role="main">
		<header>
			<h2>2006-2008</h2>
		</header>
		<figure>
			<figcaption>graphique</figcaption>
			<table class="graphique" border="1">
				<caption>stats de 2006 à 2008</caption>
				<thead>
					<tr>
						<th scope="col">année</th>
						<th scope="col">pourcentage</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">2006</th>
						<td><span class="w10">&nbsp;</span> 10</td>
					</tr>
					<tr>
						<th scope="row">2007</th>
						<td><span class="w20">&nbsp;</span> 20</td>
					</tr>
					<tr>
						<th scope="row">2008</th>
						<td><span class="w30">&nbsp;</span> 30</td>
					</tr>
				</tbody>
			</table>
		</figure>
		<footer>
			publié le 
		</footer>
	</article>
	<aside role="complementary">
		contenu additionnel
	</aside>
	<footer role="contentinfo">
		copyright
	</footer>
</body>
</html>

Modifié par Patidou (22 Aug 2012 - 22:38)
Merci Patidou pour ton aide.

Cependant j'ai besoin de faire de façon verticale.
Le line-height en effet décale le texte vers le bas mais c'est la seule façon que j'ai trouvé pour coller mes 3 barres (2006,2007,2008) en bas du graphique.

Sinon je me fiche de IE, c'est pour de l'intranet. Smiley cligne
Sujet clos
Aller à