Beiträge von Sempervivum

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;
                }
                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,
                }).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
                });
                cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
                    .drawLayers();
            });
        }
        erstelleBalken("#display1", 50, 100);
        erstelleBalken("#display2", 5, 100, {textPos: "left"});
        sychronisiereBalken("#display1, #display2");

    <style>
        #wrapper1 {
            display: inline-flex;
            flex-direction: column;
            border: 2px solid lightblue;
        }

        .line {
            display: flex;
            flex-direction: row;
        }

        .box {
            /* width: 12.5vw;
            height: 12.5vw; */
            border: 2px solid lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .tt {
            position: absolute;
            width: 80%;
            left: 10%;
            text-align: center;
            background-color: aquamarine;
            display: none;
        }
        .box:hover .tt {
            display: block;
        }
    </style>
    <div id="wrapper1">
    </div>
    <input id="nrinput" type="number" min="2" max="10" onchange="go(this.value);">Gib die Anzahl der Kästchen pro Kante ein.
    <script>
        function go(nr) {
            var wrapper = document.getElementById("wrapper1");
            wrapper.innerHTML = "";
            for (var i = 0; i < nr; i++) {
                var line = document.createElement("div");
                line.className = "line";
                wrapper.appendChild(line);
                for (var j = 0; j < nr; j++) {
                    var box = document.createElement("div");
                    box.className = "box";
                    var d = 50 / nr + "vw";
                    box.id = "box-" + (i + 1) + "." + (j + 1);
                    box.style.width = box.style.height = d;
                    box.innerHTML = (i * nr + j + 1);
                    var tt = document.createElement("div");
                    tt.className = "tt";
                    tt.innerHTML = (i +1) + "." + (j + 1);
                    tt.style.top = d;
                    box.appendChild(tt);
                    line.appendChild(box);
                }
            }
        }
        go(5);
    </script>