Les graphiques à barres sur un site Web

StackOverflow https://stackoverflow.com/questions/1127426

  •  13-09-2019
  •  | 
  •  

Question

Je ne suis pas un designer web, donc je voudrais l'aide aussi détaillée que vous êtes prêt à donner.

Je voudrais faire un site Web qui permet de suivre certaines données que j'aide d'un graphique ENTRER barre de 0-100%. J'entrer le nombre maximum le graphique pourrait aller et un point de données sera mise à jour de temps en temps, que le graphique à barres d'achèvement refléterait.

Comment dois-je prendre?

Je sais que HTML et PHP de base, mais ne l'ai pas utilisé soit dans un temps très long.

Était-ce utile?

La solution

Je pense que la plupart des suggestions sont trop puissantes. Pas besoin d'avoir une bibliothèque / dépendance supplémentaire lorsque vous avez besoin est quelques bargraphes simples. HTML / CSS simple 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).

Autres conseils

Je sais que vous avez dit que vous êtes nouveau, mais vous devriez jeter un oeil à l'API de visualisation Google. Il a obtenu quelques bonnes choses à faire le genre de chose que vous voudrez peut-être.
http://code.google.com/apis/visualization/

Il y a deux façons dont vous pourriez faire face à ce problème; générer le graphique sur le back-end (probablement en utilisant PHP dans votre cas) ou le faire sur le côté client en utilisant javascript.

Je ne sais pas les détails de le faire en PHP, comme je ne sais pas vraiment la langue, mais je suis sûr qu'il ya beaucoup d'informations là-bas sur la génération graphique en PHP.

Pour l'approche javascript, je l'ai utilisé à la fois Flot (pour jquery) et flotr (pour le prototype) avant. 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 tous les types de graphiques, y compris les graphiques à barres.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top