Diagrammes à barres sur un site Web

Question

Je ne suis en aucun cas un concepteur de sites Web, alors j'aimerais recevoir une aide détaillée comme vous le souhaitez. Je voudrais faire un site Web qui suit certaines données que je sais en utilisant un graphique à barres de 0-100%. J'indiquerais le nombre maximum auquel le graphique pourrait aller et ensuite un point de données serait mis à jour de temps en temps, ce que refléterait le graphique à barres d'achèvement.

Comment ferais-je cela?

Je connais le HTML et le PHP de base, mais je ne les ai pas utilisés depuis très longtemps.

Answer 1

Je pense que la plupart des suggestions sont trop puissantes. Pas besoin d'avoir une bibliothèque supplémentaire/dépendance quand tout vous avez besoin est des bargraphes simples HTML/CSS ordinaire devrait faire ...

PS:. exemple de code rapide, testé uniquement dans Firefox 3.x

<style type="text/css"> 
.bar 
{ 
    background-color: green; 
    position: relative; 
    height: 16px; 
    margin-top: 8px; 
    margin-bottom: 8px; 
} 
</style> 

<div id="barcontainer" style="width:200px;"> 
    <div id="bar1" class="bar" style="width:43%;"></div> 
    <div id="bar2" class="bar" style="width:12%;"></div> 
    <div id="bar3" class="bar" style="width:76%;"></div> 
    <div id="bar4" class="bar" style="width:100%;"></div> 
</div> 

vous pouvez modifier la largeur des barres individuelles facilement avec javascript (il suffit de changer la largeur)

Answer 2

Je sais que vous avez dit que vous êtes nouveau, mais vous devriez jeter un oeil à l'API api de visualisation. Il a de bonnes choses à faire le genre de chose que vous pourriez vouloir.
http://code.google.com/apis/visualization/

Answer 3

Il existe deux façons de résoudre ce problème. générer le graphique sur le backend (probablement en utilisant PHP dans votre cas) ou le faire du côté client en utilisant javascript. Je ne suis pas sûr que les détails de le faire en PHP, car je ne connais pas vraiment la langue, mais je suis sûr qu'il y a beaucoup d'informations sur la génération de graphiques en PHP.

Pour l'approche javascript, j'ai utilisé à la fois flot (pour jquery) et flotr (pour le prototype) auparavant. Je les aime beaucoup, et il y a une bonne documentation et des exemples pour les deux bibliothèques sur la façon de générer toutes sortes de graphiques, y compris les graphiques à barres.

Answer 4

Si vous vouliez garder les choses simples et utiliser PHP et HTML, vous pouvez utiliser la bibliothèque GD de PHP.

Il s'agit d'une bibliothèque graphique à usage général.

Il existe un exemple here qui illustre la création d'un graphique à barres.

Answer 5

Si vous ne voulez pas faire beaucoup de programmation que vous pouvez toujours créer le graphique dans Google Spreadsheets et puis juste publier/intégrer le graphique dans votre site web:

http://googlesystem.blogspot.com/2007/04/google-spreadsheets-charts.html

Answer 6

J'interprétation votre question comme: vous voulez mettre des graphiques à barres sur votre site web. ExtJS a une bonne mise en œuvre de graphiques à barres (http://extjs.com/deploy/dev/examples/chart/reload-chart.html). Inconvénient majeur est que vous aurez besoin d'apprendre un peu de javascript.

Answer 7

Peut-être que vous devriez jeter un oeil à D3. C'est vraiment génial pour ça.

http://d3js.org/