Java Script Bibliotheken

detolopez

Der Text soll links bzw. rechts neben dem Balken stehen nur dort soll er sich dann jeweils rechts ausrichten

detolopez

Was heißt denn einfacher mit HTML und CSS? gibt es ein Beispiel ?

detolopez

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 ?

detolopez

ich habe keine Befehl gefunden um den text rechts auszurichten, kann mir jemand wieterhelfen?

Sempervivum

Zitat

Also ich habe es jetzt hinbekommen so wie ich es haben möchte

Wie hast Du es denn hin bekommen, hast Du meinen Code aus Posting #79 verwenden können?

detolopez

Zitat von Sempervivum

Wie hast Du es denn hin bekommen, hast Du meinen Code aus Posting #79 verwenden können?

Nein ich habe meinen angepasst, das ich den text selber positionieren kann also nicht mehr abhängig von der Balkenlänge und so und die Balkenposition habe ich auch fest eingestellt, jetzt passt es soweit so gut nur das die zahlen nicht so ausgerichtet sind wie ich es möchte.

html-seminar.de/woltlab/attachment/1449/

ich möchte das die fünf unter der letzten null von der tausend ist, also rechtsbündig. Ich weis nur nicht wie ich das einstelle, weil ich ja den text hart an eine Position setze

Code

if (balkenEigenschaften.textPos == "left") {
                    var xBar = 200, //Anfangspunkt des Balkens, wenn die Zeit links steht
                    var xText = 0;    //Anfangspunkt des Textes, wenn die Zeit links steht
} 
else {
                    var xBar = 200, //Anfangspunkt des Balkens, wenn die Zeit rechts steht
                    var xText = 240 + balkenEigenschaften.barWidth; //Anfangspunkt des Textes, wenn die Zeit rechts steht
}

Sempervivum

OK, ich werde eine Blick darauf werfen. War eine schlechte Wahl, den Weg mit Canvas statt HTML/CSS zu gehen, aber ich möchte jetzt auch nicht alles neu machen.

Sempervivum

Die Funktion alignText() richtet den Text rechts aus:

HTML

<!doctype html>
<html>

<head>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>

<body>
        <canvas id="display1" width="220" height="220"></canvas>
        <canvas id="display2" width="220" height="220"></canvas>
        <input id="val" />
    <button id="colorbtn">Change color</button>
    <script>
        function getColor2(value, opts) {
            var color = opts.colorBar;
            if (opts.colors) {
                opts.colors.forEach(function (item, idx) {
                    if (value > item.threshold) color = item.colorAbove;
                });
            }
            return color;
        }
        function getText(value, max, opts) {
            return opts.templateText.replace("{value}", value)
                .replace("{remaining}", max - value)
        }
        function alignText(cv) {
            var maxTextWidth = cv.data("max-text-width");
            var textWidth = cv.measureText('text').width;
            var delta = maxTextWidth - textWidth;
            var xText  = cv.data("x-text");
            cv.setLayer('text', {
                x: xText + delta
            });
        }
        function erstelleBalken(selector, value, max, options) {
            var balkenEigenschaften = { barWidth: 400, barHeight: 40, barPos: 10,
                cornerRadius: 5, colorBg: "lightgrey", colorText: "black", textPos: "right", 
                templateText: "{value} min" }
            $.extend(balkenEigenschaften, options);
            $(selector).each(function (index, element) {
                var cv = $(this);
                cv.data("balkenEigenschaften", balkenEigenschaften);
                cv.data("max", max);
                if (value > max) max = value;
                var colorBar = getColor2(value, balkenEigenschaften);
                var height = 2 * balkenEigenschaften.barPos + balkenEigenschaften.barHeight;
                cv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorText,
                    strokeWidth: 4,
                    x: balkenEigenschaften.barPos, y: balkenEigenschaften.barPos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
                });
                cv.data("max-text-width", cv.measureText('text').width);
                yBar = balkenEigenschaften.barPos + cv.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2;
                if (balkenEigenschaften.textPos == "left") {
                    var xBar = balkenEigenschaften.barPos + cv.measureText('text').width + 5,
                        xText = balkenEigenschaften.barPos;
                } else {
                    var xBar = balkenEigenschaften.barPos,
                        xText = balkenEigenschaften.barPos + balkenEigenschaften.barWidth + 10;
                }
                cv.data("x-text", xText);
                var width = balkenEigenschaften.barPos + cv.measureText('text').width + 10 + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.attr("width", width);
                cv.attr("height", height);
                cv.setLayer('text', {
                    text: getText(value, max, balkenEigenschaften),
                    x: xText,
                });
                cv.drawLayers();
                cv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
                cv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
            });
        }
        function sychronisiereBalken(selector) {
            var maxTextWidth = 0;
            $(selector).each(function (index, element) {
                var cv = $(element);
                var currentWidth = cv.data("max-text-width");
                if (currentWidth > maxTextWidth) maxTextWidth = currentWidth;
            });
            $(selector).each(function (index, element) {
                var cv = $(element);
                var balkenEigenschaften = cv.data("balkenEigenschaften");
                if (balkenEigenschaften.textPos == "left")
                    xText = balkenEigenschaften.barPos;
                else
                    xText = balkenEigenschaften.barPos + maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.setLayer('background', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('bar', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('text', {
                    x: xText
                }).drawLayers();
                alignText(cv);
                cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
                    .drawLayers();
            });
        }
        erstelleBalken("#display1", 50, 100, {textPos: "left"});
        erstelleBalken("#display2", 5, 100, {textPos: "left"});
        sychronisiereBalken("#display1, #display2");

    </script>

</body>

</html>

Alles anzeigen

Möglicher Weise musst Du das in der Funktion, die den Balken aktualisiert, auch noch einfügen.

detolopez

hallo zusammen, ich nochmal^^

die zeit die jetzt links bzw. rechts vom Balken steht, soll nun vor dem Balken stehen.

Ich habe etwas gelesen mit z-index.

Kann mir jemand sagen wo ich das wie einfügen muss?

Danke

basti1012

Das Script ist von Sempervivum , der weiß das an besten. Der macht zur Zeit eine auszeit. Vieleicht hilft er dir noch wenn er das ließt ,weil ist sein Script.

An sonsten würde ich jetzt mal sagen das du mit z-index falsch liegst .Z-index ist dafür da Elemente übereinander zu legen ,bzw eine bestimmte reinfolge dann einzuhalten.( Vieleicht ist es bei Canvas anders ????? )

Da du den Text verschieben willst must du nach align oder sowas suchen.

Ich hoffe das Sempervivum dir das noch beantwortet ( vieleicht auch über PN ). Ansonsten muß mal einer von uns sich das genauer ankucken ,was eigentlich vermieden werden sollte. Man fummelt in anderen Scripten nur rum wenn es sein muß.

Außerdem in Canvas ist und bleibt Sempervivum der Fachmann.

Versuch ihn mal zu erreichen und wenn du kein Glück hast wird es hier bestimmt dann auch eine Lösung geben

JR Cologne

m.scatello Geht das auch ein bisschen freundlicher und mit weniger Ausrufezeichen? Du hast ja nicht unrecht und meinst es sicher auch nur gut, aber dein Tonfall sorgt vielleicht nicht wirklich dafür, dass Basti dir eher zuhört und deine Ratschläge befolgt.

Das macht es letztendlich für alle einfacher, wenn wir hier alle einen guten Umgangston pflegen. Danke.

Jetzt mitmachen!