grafici a barre su un sito web

Question

Sono in alcun modo un web designer, quindi mi piacerebbe aiuto dettagliato come si è disposti a dare.

Mi piacerebbe fare un sito web che che tiene traccia alcuni dati entro in utilizzando un grafico a barre da 0-100%. Mi piacerebbe inserire il numero massimo il grafico potrebbe andare e poi un certo punto i dati sarebbero stati aggiornati di tanto in tanto, che il grafico a barre di completamento rifletterebbe.

Come potrei fare per fare questo?

Lo so HTML di base e PHP, ma non ho usato sia in un tempo molto lungo.

Answer 1

Credo che la maggior parte dei suggerimenti sono eccessivo. Non c'è bisogno di avere un extra biblioteca / dipendenza quando tutto ciò che serve è alcuni grafici a barre semplici. Plain HTML / CSS dovrebbe fare ...

PS: esempio di codice rapido, testato solo in 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>

È possibile modificare la larghezza delle singole barre facilmente con javascript (basta cambiare la larghezza).

Answer 2

So che hai detto che sei nuovo, ma si dovrebbe dare un'occhiata alla API di visualizzazione di Google. Essa ha avuto un po 'di roba buona per fare il genere di cosa che si potrebbe desiderare.
http://code.google.com/apis/visualization/

Answer 3

Ci sono due modi si potrebbe affrontare questo problema; generare il grafico sul backend (probabilmente utilizzando PHP nel tuo caso) o farlo sul lato client utilizzando JavaScript.

Non sono sicuro che le specifiche di farlo in PHP, come io non so davvero la lingua, ma sono sicuro che c'è un sacco di informazioni là fuori sulla generazione grafico in PHP.

Per l'approccio javascript, Ho usato sia flot (per jQuery) e flotr (per il prototipo) prima. Mi piacciono un sacco, e c'è qualche buona documentazione e gli esempi per entrambe le librerie su come generare tutti i tipi di grafici, tra cui grafici a barre.