Java Script Bibliotheken

Sempervivum · 10. November 2017

Gern. Der Browser arbeitet die Datei von oben nach unten ab. Das Javascript greift hier:

Code

$("#val").on("change", function () {

auf das Input mit der ID "val"

und hier:

Code

$(selector).each(function (idx, ele) {

auf das Canvas mit der ID "display" zu. Steht das Javascript im Head, hat der Browser die Zeilen wo diese Elemente definiert werden, noch nicht abgearbeitet und sie sind deshalb undefiniert.

Es kommt zu keiner Fehlermeldung, weil z. B. $("#val") dann ein leeres Array liefert.

detolopez · 10. November 2017

uiii so ganz klar ist mir das nicht wann er auf was zugreift.

kannst du mir vielleicht jede Zeile einzelnd erklären bzw. mit Kommentaren versehen.

Wenn es nicht zuviel verlangt ist.

wäre dir sehr dankbar.

Sempervivum · 10. November 2017

OK, ich habe es mal versucht. Wenn Du den Code wirklich verstehen willst, empfehle ich, das jQuery-Tutorial hier bei html-siminar durchzuarbeiten.

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        });

        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("templateText").replace("{value}", value)
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg
                }, {
                    duration: 1000,
                    easing: 'linear',
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $"
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende diese Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("max", max);
                canv.data("templateText", opts.templateText);
                var deg = value / max * 360;
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: opts.colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 30, 100);

    </script>

</body>
</html>

Alles anzeigen

detolopez · 12. November 2017

ok ich werde es konkreter:

und wo ist der Bereich wo ich den wert eingebe?

HTML

<!doctype html>
<html>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>            //Was besagen die Befehle width und height
                                                          //es verändert sich nichts wenn ich diese Werte verändere
    <input id="val" />
    <script>
        $("#val").on("change", function () {              //was bedeutet change?
            updateCircleDisplay("#display", this.value);  //was macht #display und this.value?  
        });
        function updateCircleDisplay(selector, value) {    //was bedeutet hier selector und heißt value: das der wert übergeben wird?
            $(selector).each(function (idx, ele) {        //was heißt idx und ele
                var canv = $(this);                       
                var max = canv.data("max");                
                var deg = value / max * 360;            
                canv.setLayer('text', {
                    text: canv.data("templateText").replace("{value}", value)
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg
                }, {
                    duration: 1000,
                    easing: 'linear',
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $"
            }
            $.extend(opts, options);
            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende diese Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("max", max);
                canv.data("templateText", opts.templateText);
                var deg = value / max * 360;
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: opts.colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 30, 100);
    </script>
</body>
</html>

Alles anzeigen

Sempervivum · 12. November 2017

Zeile 7 erzeugt ein Eingabefeld, wo Du den Wert eingeben kannst:

Code

<input id="val" />

Und ab Zeile 9 wird diesem ein Eventlistener zugewiesen, durch Aufruf der Funktion updateCircleDisplay() die Anzeige auf den Wert setzt, der im Eingabefeld eingegeben wurde.

detolopez · 16. November 2017

hallo zusammen,

ich habe es so hinbekommen jetzt mochte ich aber gerne eine if else Bedingung drin haben und sagen unter einem wert ist der kreis rot und drüber grün.

ich hatte die Idee der variablen opts einer id zuordnen und dann über eine if else Bedingung

if (value<10){

$(id).css("colorCircle", "red");

}

else{

$(id).css("colorCircle", "green");

}

kann man das so machen ? oder gibt es da was anderes ?

mein Problem ist einfach das ich nicht weis wie ich der variablen eine id zuordnen kann und wohin die Bedingung im Code hinkommt.

Dazu muss ich sagen, dass ich mehrere Kreise mit der Funktion generiere und jeder kreis hat seine eigene id. darum will ich das in der function realisieren.

Ich hoffe es verwirrt nicht

Sempervivum · 16. November 2017

Nein, so wie Du es beschreibst, funktioniert es leider nicht, weil die Kreise keine HTML-Elemente sondern Layers von jCanvas sind.

Ich habe mal etwas ausgearbeitet, was deinen Wunsch erfüllen sollte:

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        });

        function getColor(value, opts) {
            if (opts.threshold) {
                if (value < opts.threshold) return opts.colorCircle;
                else return opts.colorAbove;
            } else {
                return opts.colorCircle;
            }
        }
        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("opts").templateText.replace("{value}", value),
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg,
                    strokeStyle: getColor(value, canv.data("opts"))
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $",
                threshold: 50,
                colorAbove: 'green'
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende dieses Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var deg = value / max * 360;
                var colorCircle = getColor(value, opts);
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 80, 100, {
            threshold: 60,
            colorCircle: 'red',
            colorAbove: 'green'
        });

    </script>

</body>
</html>

Alles anzeigen

Eine coole Erweiterung wäre jetzt noch, wenn der Text nicht springt sondern während der Animation herauf- bzw. herunter gezählt würde :-;

detolopez · 16. November 2017

das funktioniert schon genau so will ich es auch haben aber du gehst halt über die id des display da ran und ich habe mehrere kreise auf dem Bildschirm und jeder kreis bekommt einen anderen wert aus einer Datenbank übergeben aus dem Grund kann ich nicht über die id da ran gehen.

ich dachte das ich das einfach in die Funktion kreis erstellen mit rein tun kann.

Sempervivum · 16. November 2017

Das ist kein Problem: Für jeden Kreis definierst Du ein Display-Canvas mit jeweils einer anderen ID und die Funktionen rufst Du mehrmals, jeweils mit der richtigen ID auf. Würde dann so aussehen:
https://jsfiddle.net/Sempervivum/u4x71bvr/2/

Wenn alle Kreise gleich aussehen sollen und die selben Maximalwerte haben, kannst Du auch eine Klasse vergeben und die Initialisierung darauf machen.

basti1012 · 17. November 2017

Zitat von Sempervivum

https://jsfiddle.net/Sempervivum/u4x71bvr/2/

da lästsich eine wundervolle uhr rausbauen ...müsste nur noch der farbcode so geändert werden das langsam hell und dunkel wird so wie tag ud nacht

detolopez · 17. November 2017

habe es schon hinbekommen. Danke

detolopez · 18. November 2017

Hallo nochmal von mir, jetzt brauche ich das selbe aber nur das es mir in einem horizontalen Balken angezeigt wird.

ich versuche gerade das Kreisdiagramm umzustricken aber es klappt noch nicht ganz.

basti1012 · 18. November 2017

Zitat von detolopez

Hallo nochmal von mir, jetzt brauche ich das selbe aber nur das es mir in einem horizontalen Balken angezeigt wird.

ich versuche gerade das Kreisdiagramm umzustricken aber es klappt noch nicht ganz.

wie meinst du das das es in einen horizontalen balken angezeigt wird ...??

detolopez · 18. November 2017

Zitat von basti1012

wie meinst du das das es in einen horizontalen balken angezeigt wird ...??

jetzt zeige ich ja die zahl in einem Kreisdiagramm an aber nun soll es ein Balken sein der von links nach rechts immer größer wird

basti1012 · 18. November 2017

meinst du sowas

http://jsfiddle.net/SpYk3/hnfRe/3/

detolopez · 18. November 2017

genau nur das links ein Text stehen soll.

Dann soll der Balken ja bis rechts gehen und da soll dann auch die Uhrzeit angezeigt werden wienlange es noch dauert bis der Balken voll ist.

Diese Zeit will ich übergeben und es müssen keine kommazahlen sein und es soll sich die Farbe von grün auf geld und dann rot ändern.

basti1012 · 18. November 2017

was willst du den angezeigt haben ...ich meine damit der balken kann ich 1 sekunde auf 100 stehen oder dafür 2 stunden dauern...willst du damit ein download anzeigen oder was auch immer...das muss man auch wissen damit die zeit berechnet werden kann wie lange es dauert bis er auf 100 prozent ist ....

die farben könnte man in der css from bis to animieren bei einer festen zeit ... oder halt mit einer if abfrage fest zuweisen ...

fals ich unrecht habe wird hier bestimmt einer was dazu sagen ...

wenn du das

Code

y = x.toFixed(3);

in das

Code

y = x.toFixed(0);

änderst dann hast du keine komma zahl mehr

Sempervivum · 18. November 2017

Gut gemacht, Basti! Solche eine Balkenanzeige kann man sehr gut mit HTML und CSS erzeugen.

Ich habe trotzdem mal meine mit jCanvas umgestellt:

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="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        $("#val").on("change", function () {
            updateBarDisplay("#display", this.value);
        });

        function getColor(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 updateBarDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var opts = canv.data("opts");
                var barWidth = value / max * opts.barWidth;
                canv.setLayer('text', {
                    text: opts.templateText.replace("{value}", value),
                }).stopLayer('bar')
                .animateLayer('bar', {
                    width: barWidth,
                    fillStyle: getColor(value, opts)
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createBarDisplay(selector, value, max, options) {
            var opts = {
                barWidth: 300,
                barHeight: 40,
                cornerRadius: 10,
                colorBar: "blue",
                colorBg: "lightgrey",
                colorText: "orange",
                templateText: "{value} $",
                colors: [
                    { threshold: 30, colorAbove: 'yellow' },
                    { threshold: 60, colorAbove: 'green' }
                ]
            }
            $.extend(opts, options);

            $(selector).each(function (idx, ele) {
                var pos = 10;
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var colorBar = getColor(value, opts);
                var height = 2 * pos + opts.barHeight;
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", max)
                });
                var xBar = pos + canv.measureText('text').width + 10,
                    yBar = pos + canv.measureText('text').height / 2 - opts.barHeight / 2;
                var width = pos + canv.measureText('text').width + 10 + opts.barWidth + pos;
                canv.attr("width", width);
                canv.attr("height", height);
                canv.setLayer('text', {
                    text: opts.templateText.replace("{value}", value)
                }).drawLayers();
                canv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: opts.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: opts.cornerRadius,
                    width: opts.barWidth, height: opts.barHeight
                });
                canv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: opts.cornerRadius,
                    width: value / max * opts.barWidth, height: opts.barHeight
                });
            });
        }
        createBarDisplay('#display', 10, 100, {
            colorBar: 'red',
            colors: [
                { threshold: 30, colorAbove: 'yellow' },
                { threshold: 60, colorAbove: 'green' }
            ]
        });

    </script>

</body>
</html>

Alles anzeigen

Jetzt kann man beliebige Farben verwenden, weil die Schwellen und die Farben in einem Array übergeben werden.

Sempervivum · 18. November 2017

Ich habe auch die Kreisanzeige erweitert, so dann man mehrere Farben verwenden kann:

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        });

        function getColor(value, opts) {
            var color = opts.colorCircle;
            if (opts.colors) {
                opts.colors.forEach(function (item, idx) {
                    if (value > item.threshold) color = item.colorAbove;
                });
            }
            return color;
        }
        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("opts").templateText.replace("{value}", value),
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg,
                    strokeStyle: getColor(value, canv.data("opts"))
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $",
                colors: [
                    { threshold: 30, colorAbove: 'yellow' },
                    { threshold: 60, colorAbove: 'green' }
                ]
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende dieses Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var deg = value / max * 360;
                var colorCircle = getColor(value, opts);
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 80, 100, {
            colorCircle: 'red',
            colors: [
                { threshold: 30, colorAbove: 'yellow' },
                { threshold: 60, colorAbove: 'green' }
            ]
        });

    </script>

</body>
</html>

Alles anzeigen

detolopez · 19. November 2017

Zitat von Sempervivum

Ich habe auch die Kreisanzeige erweitert, so dann man mehrere Farben verwenden kann:

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        });

        function getColor(value, opts) {
            var color = opts.colorCircle;
            if (opts.colors) {
                opts.colors.forEach(function (item, idx) {
                    if (value > item.threshold) color = item.colorAbove;
                });
            }
            return color;
        }
        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("opts").templateText.replace("{value}", value),
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg,
                    strokeStyle: getColor(value, canv.data("opts"))
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $",
                colors: [
                    { threshold: 30, colorAbove: 'yellow' },
                    { threshold: 60, colorAbove: 'green' }
                ]
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende dieses Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var deg = value / max * 360;
                var colorCircle = getColor(value, opts);
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 80, 100, {
            colorCircle: 'red',
            colors: [
                { threshold: 30, colorAbove: 'yellow' },
                { threshold: 60, colorAbove: 'green' }
            ]
        });

    </script>

</body>
</html>

Alles anzeigen

Hey sempervivum,

vielen Dank für deine Hilfe.

Bei dem Balken wird ja links der Wert angezeigt, ich möchte dort aber die restlichen Wert anzeigen lassen, also nicht wieviel der Balken schon voll ist sondern wieviel es noch braucht bis er voll ist. Und der Text soll rechts am Balken stehen und nicht links wie jetzt.

Kannst du mir da ein letztes mal noch behilflich sein ?

Java Script Bibliotheken

Jetzt mitmachen!

Teilen