Also ich habe es jetzt hinbekommen so wie ich es haben möchte, außer das rechtsbündige steht noch nicht.
Gibt es da einen Befehl wie ich die Zeiten links und rechts vom Balken rechtsbündig ausrichte ?
Beiträge von detolopez
-
-
Was heißt denn einfacher mit HTML und CSS? gibt es ein Beispiel ?
-
Der Text soll links bzw. rechts neben dem Balken stehen nur dort soll er sich dann jeweils rechts ausrichten
-
Ich habe es schon hinbekommen das die Balken an der selben Stelle anfangen aber die Zeit rechts vom Balken wird nicht mehr angezeigt. Kann man das einstellen das der Balken einen gewissen Bereich lang geht und ich dann separat entscheide ob die zeit rechts oder links steht ?
und das rechtsbündige habe ich auch noch nicht hinbekommen
-
Hallo zusammen,
wie kann ich die die Zeiten der Balken rechtsbündig anordnen?
kann ich das auch separat über css machen?
Und ich habe ja zwei verschiedene Balken einmal das die Zeit links und einmal das die Zeit rechts steht.
kann man das auch so verändern das die Balken trotzdem immer in einer Linien stehen ?
Wie auf dem Bild zu sehen.
html-seminar.de/woltlab/attachment/1402/
Zur Zeit ist es so.
html-seminar.de/woltlab/attachment/1403/
Ich hoffe man kann mir helfen
Code
Alles anzeigenfunction erstelleBalken(selector, value, max, options) { var balkenEigenschaften = {barWidth: 800, barHeight: 40, cornerRadius: 5,colorBg: "lightgrey",colorText: "black", templateText: "{value} min"} $.extend(balkenEigenschaften, options); $(selector).each(function (index, element) { var pos = 10; var balkenID = $(this); balkenID.data("balkenEigenschaften", balkenEigenschaften); balkenID.data("max", max) if (value > max) max = value; var colorBar = getColor2(value, balkenEigenschaften); var height = 2 * pos + balkenEigenschaften.barHeight; balkenID.drawText({ layer: true, name: 'text', fromCenter: false, fillStyle: balkenEigenschaften.colorText, strokeWidth: 4, x: pos, y: pos, fontSize: 40, fontFamily: 'Arial', text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max) }); yBar = pos + balkenID.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2; if (balkenEigenschaften.textPos == "left") { var xBar = pos + balkenID.measureText('text').width + 5, xText = pos; } else { var xBar = pos, xText = pos + balkenEigenschaften.barWidth + 10; } var width = pos + balkenID.measureText('text').width + 10 + balkenEigenschaften.barWidth + pos; balkenID.attr("width", width); balkenID.attr("height", height); balkenID.setLayer('text', { text: getText(value, max, balkenEigenschaften), x: xText }).drawLayers(); balkenID.drawRect({ layer: true, name: 'background', fromCenter: false, fillStyle: balkenEigenschaften.colorBg, x: xBar, y: yBar, cornerRadius: balkenEigenschaften.cornerRadius, width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight }); balkenID.drawRect({ layer: true, name: 'bar', fromCenter: false, fillStyle: colorBar, x: xBar, y: yBar, cornerRadius: balkenEigenschaften.cornerRadius, width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight }); }); }//end function erstelleBalken -
Ja ich möchte aber keine fertige Lösung von euch bekommen. Ich wollte mehr ein vorgehen haben, das ich mir selber alles erarbeite.
Ich stelle mir die frage mit welchen befehlen positioniere ich die Balken und die Kreise und dann soll die Position ja noch abhängig von der Aufösung des Bildschirms sein. Ich finde einfach nichts
-
Ja welche anderen Möglichkeiten gibt es denn? Muss ich die Größe igrendwie mit Prozenten hinterlegen oder wie gehe ich da von Grund aus vor ?
-
Hallo zusammen,
ich habe eine HTML Seite erstellt auf der Balken angezeigt werden. Ich habe aber leider alles Absolut positioniert an dem einen Bildschirm passt alles sobald ich aber auf einem anderen Bildschirm die sachen anzeige ist nicht mehr alles im Bild oder es wird viel zu klein angezeigt. Wie muss ich vorgehen das sich die Balken automatisch an die Auflösung anpassen ?
-
ich übergebe dem Balken per AJAX die Zeit wodurch der Balken dann schneller oder langsamer läuft
-
genau so nur das am ende der rote Balken einfach stehen bleibt. Und es soll keine Prozent angezeigt werden sondern Zeit.
-
Nein ich meine das der ganze Balken direkt grün ist, dann kleiner wird aber der bereich der nicht mehr grün ist direkt gelb ist und wenn der gelbe dann die volle breite hat das selbe mit rot
-
Hallo zusammen ich möchte gerne mit der Zeit einen Balken(Hintergund) ablaufen lassen, welcher erst grün ist dann ins gelbe geht und wenn der Bereich ganz gelb ist dann bewegt er sich ins rote.
Also erst ist der Hintergund ganz grün mit der Zeit bewegt sich das grüne Feld nach links und am ende des grünen Feldes ist er gelb. Und danach das selbe mit dem gelben Feld und am ende ist das Feld rot. Ich hoffe ich habe mich verständlich ausgedrückt
-
OK das mit dem Maximalwert habe ich verstanden. Ich möchte das aber so realisieren das der Balken erst ab 30 runterzählt, der Start ist aber bei 100 kann ich das textfeld auch selber definieren (sowas wie gib mir soviel platz für das textfeld und so groß soll der Balken sein)?
Aber das mit den null, null hast du recht
-
Code
Alles anzeigenfunction getColor2(value, Eigenschaften) { var color = Eigenschaften.colorBar; if (Eigenschaften.colors) { Eigenschaften.colors.forEach(function (item, index) { if (value > item.threshold) color = item.colorAbove; }); } return color; }//end function getColor2 function getText(value, max, Eigenschaften) { return Eigenschaften.templateText.replace("{value}", value) .replace("{remaining}", value) } erstelleBalken(balkenId3,0,0,{colorBar: 'black',templateText:"{remaining}\'", textPos: "left"}); -
Code
Alles anzeigenfunction erstelleBalken(selector, value, max, options) { var Eigenschaften = {barWidth: 800, barHeight: 40, cornerRadius: 5,colorBg: "lightgrey",colorText: "black", templateText: "{value} min"} $.extend(Eigenschaften, options); $(selector).each(function (index, element) { var pos = 10; var balkenID = $(this); balkenID.data(Eigenschaften", Eigenschaften); balkenID.data("max", max) if (value > max) max = value; var colorBar = getColor2(value, Eigenschaften); var height = 2 * pos + Eigenschaften.barHeight; balkenID.drawText({ layer: true, name: 'text', fromCenter: false, fillStyle: Eigenschaften.colorText, strokeWidth: 4, x: pos, y: pos, fontSize: 40, fontFamily: 'Arial', text: Eigenschaften.templateText.replace("{value}", max).replace("{remaining}", max) }); yBar = pos + balkenID.measureText('text').height / 2 - Eigenschaften.barHeight / 2; if (Eigenschaften.textPos == "left") { var xBar = pos + balkenID.measureText('text').width + 35, xText = pos; } else { var xBar = pos, xText = pos + Eigenschaften.barWidth + 10; } var width = pos + balkenID.measureText('text').width + 10 + Eigenschaften.barWidth + pos; balkenID.attr("width", width); balkenID.attr("height", height); balkenID.setLayer('text', { text: getText(value, max, Eigenschaften), x: xText }).drawLayers(); balkenID.drawRect({ layer: true, name: 'background', fromCenter: false, fillStyle: Eigenschaften.colorBg, x: xBar, y: yBar, cornerRadius: Eigenschaften.cornerRadius, width: Eigenschaften.barWidth, height: Eigenschaften.barHeight }); balkenID.drawRect({ layer: true, name: 'bar', fromCenter: false, fillStyle: colorBar, x: xBar, y: yBar, cornerRadius: Eigenschaften.cornerRadius, width: value / max * Eigenschaften.barWidth, height: Eigenschaften.barHeight }); }); }//end function erstelleBalken -
Das ist die Funktion die den Balken erstellt. Beim Aufrufen verändere ich nur die Farbe und dann schneidet der mit das direkt ab.
Ich habe es bei Firefox und bei IExplorer versucht und beides mal das gleiche
-
Hallo zusammen, das mit den Balken funktioniert fast perfekt. Eine Sache habe ich noch.
Damals war das Problem, das der Balken über die Schrift gegangen ist.
Nun ist das Problem, das der Balken rechts abgeschnitten wird wenn die Zeit links angezeigt wird oder wenn die Zeit rechts zu groß wird dann wird das min abgeschnitten.
Hat da vielleicht jemand ne Lösung?
-
Kannst Du das genauer beschreiben?
Also zuerst ist imme der (grüne oder gelbe oder rote) Balken da dieser Balken verändert ja nur seine Farbe und die Schrift ist rechts. Dieser wird auch nicht in der Schleife erzeugt.
Dann gibt es noch einen zweiten Balken der ist immer blau ist und die Schrift ist links. Dieser blaue wird nach Kriterien erzeugt, diese sind in einer Schleife definiert. Nun ist das Problem das der Balken erst an der Position ist wo er sein soll und dann springt der immer einpaar pixel nach links und nach unten. ich denke der Grund dafür ist, das ich Ihn immer wieder neu erzeuge. Aus dem Grund wollte ich das alles über Animationen realisieren aber wenn du sagst man kann den aktualisieren, währe ich dir sehr dankbar, wenn du mir den code senden kannst
Code
Alles anzeigenerstelleBalken('#balkenM17S', 100, 100, {colorBar: 'red',colors: [{ threshold: 5, colorAbove: 'yellow' },{ threshold: 10, colorAbove: 'green' },],templateText:"{remaining} min", textPos: "right"}); function Zeichnen(strResponseText){ var objDaten = JSON.parse(strResponseText); if (objDaten.currentspeed[0]>=0) { if(objDaten.currentspeed[0]==0){ if (Math.abs(objDaten.setlength[0]-objDaten.currentlength[0])>200){ $( "#balkenM17S" ).hide(); erstelleBalken('#balkenM17S2', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'blue',colors: [{ threshold: 40, colorAbove: 'blue' },{ threshold: 70, colorAbove: 'blue' },],templateText:"{remaining} min", textPos: "left"}); } else { $('#balkenM17S').hide(); erstelleBalken('#balkenM17S3', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'black',colors: [{ threshold: 40, colorAbove: 'black' },{ threshold: 70, colorAbove: 'black' },],templateText:"{remaining} min", textPos: "left"}); } } else { $( "#balkenM17S2" ).hide(); $( "#balkenM17S3" ).hide(); var zeitUmbau1 = Math.round((objDaten.setlength[0]-objDaten.currentlength[0])/(objDaten.currentspeed[0]*60)); balkenDiagrammanimation('#balkenM17S',zeitUmbau1); } } // end if speed ok } -
ja habe ich jetzt auch gesehen ich habe die ID verändert es funktioniert auch. Jetzt habe ich aber immer noch das Problem das der Balken rumspackt. Der macht das nur wenn ich den Balken innerhalb der funktion erzeuge, welche dann immer wieder wegen des Intervalls durchlaufen wird.
-
die haben zur zeit noch die selbe ID ich versuche es gerade über die jquery funktion .hide wenn das nicht funktioniert dann werde ich wohl zwei verschiedene ID vergeben und das dann über CSS versuchen.
