Antworten auf deine Fragen:
Neues Thema erstellen

Balkendiagramm in HTML

Greenhorn79

Nicht mehr ganz neu hier

Hallo @all,

ich soll ein Balkendiagramm mit HTML ohne CSS erstellen und habe da so meine Probleme. Ich habe zwar ein Beispieldiagramm gefunden das ich auch schon ein wenig abgeändert habe aber es ist noch nicht ganz das was ich brauche...

Javascript-Funktion:
Code:
function erstelleDiagramm() {
border=1;
width=50;
function bar(high,val){
document.write("<td valign=bottom>",high,
   "<table bgcolor=#191970 border=",border," height=",high,
   " width=",width,
   " cellpadding=0 cellspacing=0>",
   "<tr><td align=center valign=bottom>",
   "<font color=#D4D4D4     size=-1 >",val,"</font>",
   "</td></tr></table></td>")
}
document.writeln("<table bgcolor=#a0a0a0 height=400 width=",
 teilnehmer.length*width," border=",border," >");

bar(105,1);
bar( 11,2);
bar(140,3);
bar(180,4);
bar(245,5);
bar(170,6);
bar( 88,7);
bar( 40,8);
bar(150,9);
document.writeln("</table>");
}
Ich habe in einer anderen Funktion drei Werte: Name, Punkte und PunkteMax
Der Name soll als Index für die einzelnen Balken hergenommen werden. Die Punkte sollen im Verhältnis zu PunkteMax als Höhe des Balkens hergenommen werden. Die Daten liegen in einem mehrdimensionalen Array. Ich dachte daran, dass ich die Variablen an diese Funktion übergebe und dann sowas habe wie bar(punkte/punkteMax*100,name)
Das funktioniert aber nicht.

Hat jemand einen Tipp für mich, was ich falsch gemacht habe oder wie man das Problem lösen könnte?

Danke schonmal.

Liebe Grüße
Michaela
 

Davi2000

Nicht mehr ganz neu hier

AW: Balkendiagramm in HTML

Also wenn du das mit einer Programmiersprachen realisieren sollst, bist hier im falschen Forum. Hier geht es nur rein um HTML und CSS. Und mit rein HTML geht es nicht, dazu brauchst du schon CSS. Bzw es wäre nicht Standartkonform.
 

Duddle

Posting-Frequenz: 14µHz

AW: Balkendiagramm in HTML

Ich dachte daran, dass ich die Variablen an diese Funktion übergebe und dann sowas habe wie bar(punkte/punkteMax*100,name)

Na dann mach das doch. Falls du es schon probiert hast und gescheitert bist, zeig den entsprechenden Code.

Edit: es gibt übrigens recht viele fertige JS-Funktionen, die Balkendiagramme erzeugen. Ich weiß nicht, ob welche davon nicht mit CSS arbeiten (warum auch, ist schließlich ein Standard), trotzdem hier eine Auswahl:


http://www.jqplot.com/
http://www.workshop.rs/jqbargraph/





Duddle
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

AW: Balkendiagramm in HTML

Sicher ist sie hier im korrekten Forum. Hier geht es um PHP und andere Scriptsprachen.
Deine Antwort ist hier fehl am Platz (btw: Ein Standard ist keine Art zu stehen (Standart) )

Ich würde die vorgefertigte Funktion vergessen (da wird ja noch mit font-tags gearbeitet.... das war im letzten Jahrtausend mal toll) und selber eine schreiben.
Im Prinzip nicht so kompliziert wie es klingt ;)
Wenn es tabellarische Daten sind, dann arbeite auch mit einer Tabelle. Du brauchst zwei verschachtelte Elemente, wo du die Höhe/Breite (je nachdem, in welche Richtung du die Daten darstellen willst) einfach in Prozentwerten anpasst:

HTML:
<div style="width:500px;height:20px">
<div style="width:80%;background-color:green"></div>
</div>
Diesen Aufbau musst du mit JS erzeugen. Kannst du damit etwas anfangen?
Bzw. verwendest du ein Javascript Framework (jQuery, YUI, ... ) auf deiner Seite?
 

mindraper

me[code].Java(Script)

AW: Balkendiagramm in HTML

hi.

etwas out-of-date, i know. aber falls das problem weiterhin besteht:

ich habe mal just 4 fun eine kleine js-bibliothek für die arbeit mit dem <canvas>-element gebaut. die ist zwar noch nicht final, aber für diese zwecke sollte sie auf jeden fall ausreichen.

die testpage findest du unter

sofern du das ergebnis im ff / o / chrome / safari zeigen kannst, kannst du dir das ja mal anschauen :). wie gesagt, ist bei weitem noch nicht final.

hoffe das hilft
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben