Balkendiagramme auf einer Website

Question

Ich bin auf keinen Fall ein Webdesigner, also möchte ich so detaillierte Hilfe wie Sie bereit sind zu geben.

Ich möchte eine Website erstellen, die einige Daten erfasst, die ich mit einem Balkendiagramm von 0-100% eingeben. Ich würde die maximale Zahl eingeben, zu der das Diagramm gehen könnte, und dann würden einige Datenpunkte gelegentlich aktualisiert werden, was das Abschluss-Balkendiagramm widerspiegeln würde.

Wie würde ich das machen?

Ich kenne Basic HTML und PHP, habe aber seit sehr langer Zeit nicht mehr gebraucht.

Answer 1

Ich denke, die meisten Vorschläge trieben sind. Keine Notwendigkeit, eine zusätzliche Bibliothek/Abhängigkeit haben, wenn alle Sie müssen einige einfache Bargraphen ist Plain HTML/CSS tun ...

PS sollte. Schnellcodebeispiel nur 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> 

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

Answer 2

Ich weiß, du hast gesagt, du bist neu, aber du solltest einen Blick auf die Google-Visualisierung API werfen. Es hat ein paar gute Sachen, um das zu tun, was du willst.
http://code.google.com/apis/visualization/

Answer 3

Es gibt zwei Möglichkeiten, wie Sie dieses Problem lösen können; Generiere das Diagramm auf dem Backend (in deinem Fall wahrscheinlich mit PHP) oder mach es auf der Clientseite mit Javascript.

Ich bin nicht sicher, die Besonderheiten in PHP zu tun, da ich nicht wirklich die Sprache kenne, aber ich bin sicher, es gibt eine Menge Informationen über Graph Generierung in PHP.

für den JavaScript-Ansatz, ich habe vor beiden flot (für jquery) und flotr (für Prototyp) verwendet. Ich mag sie sehr, und es gibt einige gute Dokumentationen und Beispiele für beide Bibliotheken, wie man alle Arten von Diagrammen, einschließlich Balkendiagrammen, erzeugt.

Answer 4

Wenn Sie die Dinge einfach halten und nur PHP und HTML verwenden möchten, können Sie die GD PHP-Bibliothek verwenden.

Es ist eine allgemeine Grafikbibliothek.

Es gibt ein Beispiel here, das veranschaulicht, wie ein Balkendiagramm erstellt wird.

Answer 5

Wenn Sie könnten Sie immer erstellen Sie das Diagramm in Google Text & Tabellen nicht viel Programmierung tun wollen und dann einfach veröffentlichen/einbetten das Diagramm in Ihrer Website:

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

Answer 6

ich Ihre Frage bin Interpretieren wie: Sie möchten Balkendiagramme auf Ihrer Website einfügen. ExtJS hat eine gute Umsetzung von Balkendiagrammen (http://extjs.com/deploy/dev/examples/chart/reload-chart.html). Großer Nachteil ist, dass Sie ein wenig Javascript lernen müssen.

Answer 7

Vielleicht sollten Sie sich D3 ansehen. Es ist wirklich fantastisch für diese Angelegenheit.

http://d3js.org/