2010-07-16 9 views

Répondre

2

Vous pouvez le faire avec un couple divs avec des couleurs d'arrière-plan et les frontières.

+1

+1. Utiliser PHP pour générer des trucs comme celui-ci est une surpuissance totale. Voici beaucoup, beaucoup d'exemples qui peuvent être utilisés sans javascript requis: http://speckyboy.com/2009/02/04/16-usable-css-graph-and-bar-chart-tutorials-and- techniques / – hollsk

2

D'abord, ce n'est pas un graphique à barres, il est une barre de progression.

En ce qui concerne l'implémentation, je préfère utiliser JavaScript pour effectuer le rendu. Par exemple, jetez un oeil à la jQuery UI Progress Bar. Sinon, puisque cela semble être des données statiques, vous pouvez calculer le pourcentage dans le script PHP, puis générer une image à la volée ou choisir parmi un ensemble d'images prédéfinies (par exemple: progress_10_pct, progress_20_pct, etc.). Ou comme d'autres l'ont mentionné, il suffit d'utiliser un balisage HTML/CSS pour donner l'apparence de la barre - le choix vous appartient.

0

Pour une barre de progression, utilisez une table avec une ligne et deux colonnes. Ajuster la largeur en pourcentage de la surface.

btw, nous utilisons OpenFlashChart. il vous permet de créer une barre/tarte/ligne/dispersés etc. et il est très facile à utiliser.

2

html Exemple:

<html> 
<head> 
<style> 

.container 
{ 
    width: 200px; 
    height: 50px; 

    border-style: solid; 
    border-width: 1px; 

} 

.meter 
{ 
    width: 20%; 
    height: 100%; 
    background-color: rgb(0, 255, 0); 
} 


</style> 
</head> 
<body> 

<div class="container"> 

<div class="meter"> 
&nbsp 
</div> 

</div> 

</body> 
</html> 

alt text http://grab.by/grabs/3c015b3e6d6839827d2700aa1ed33ad4.png

Bien sûr, cela ne fonctionne que si ses données statiques, si sa dynamique vous avez besoin de javascript, soit en utilisant un plugin jQuery comme mentionné, ou rouler votre posséder.

0

complètement sur le dessus de ma tête, emptor donc mise en garde ...

<head> 
... 
<style type="text/css"> 
#progressbar { 
    display:inline-block; 
    color:gray; 
    width:50%; 
} 
#progressbar div { 
    margin:0; 
} 
#progressbar > div { 
    width:100%; 
    border:1px solid #aaa; 
} 
#progressbar > div > div{ 
    background-color:green; 
    width:<?php echo sprintf("%.0f", $u/$t); ?>%; 
    height:20px; 
} 
</style> 
</head> 
... 

Disk Space Usage <div id="progressbar"><?php echo "{$u} MB/{$t} MB"; ?><br><div></div></div> 
1

Si vous voulez vraiment utiliser PHP, vous pouvez utiliser la bibliothèque GD - look at this example.

Sinon, je vous conseille d'utiliser seulement quelques divs -

<div class="bar_container"> 
    <div class="bar" style="width: <?= $percentage ?>%;">&nbsp;</div> 
</div>