Balkendiagramme auf einer Website

Question

ich nicht bin: ein Web-Designer, also würde ich als ausführliche Hilfe gerne wie Sie bereit sind, zu geben.

Ich möchte eine Website machen, dass einige Datenspuren ich ein Balkendiagramm von 0-100% eingeben werden. Ich würde die maximale Anzahl eingeben das Diagramm und dann würden einige Datenpunkte gehen könnte gelegentlich aktualisiert werden, was die Graph Abschluss bar würde widerspiegelt.

Wie würde ich mich über das Tun dies?

Ich weiß, grundlegende HTML und PHP, haben aber auch nicht in eine sehr lange Zeit verwendet wird.

Answer 1

Ich denke, die meisten Vorschläge trieben sind. Keine Notwendigkeit, eine zusätzliche Bibliothek / Abhängigkeit haben, wenn alles, was Sie brauchen einige einfache Bargraphen ist. Plain HTML / CSS tun sollte ...

PS: schnelles Codebeispiel nur in Firefox 3.x getestet

<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>

Sie können die Breite der einzelnen Balken mit Javascript leicht ändern (nur die Breite ändern).

Answer 2

Ich weiß, Sie sagten, Sie sind neu, aber Sie sollten einen Blick auf die Google-Visualisierung api nehmen. Es ist ein paar gute Sachen bekam die Art der Sache zu tun, möchten Sie vielleicht.
http://code.google.com/apis/visualization/

Answer 3

Es gibt zwei Möglichkeiten, wie Sie dieses Problem angehen könnte; erzeugt die Grafik auf dem Back-End (wahrscheinlich in Ihrem Fall mit PHP) oder tut es auf der Client-Seite mit Hilfe von Javascript.

Ich bin nicht sicher, ob die Besonderheiten es in PHP zu tun, wie ich die Sprache nicht wirklich wissen, aber ich bin sicher, dass es eine Menge an Informationen da draußen auf Graph Generation in PHP ist.

Für die Javascript Ansatz habe ich verwendet, um sowohl flicht (für jquery) und flotr (für Prototyp) vor. Ich mag sie sehr viel, und es gibt einige gute Dokumentation und Beispiele für beiden Bibliotheken, wie alle Arten von Diagrammen zu erzeugen, einschließlich Balkendiagramme.