Donut grafy

HTML kód

<div class="tiny-chartbox">
    <div
        id="failureChart1",
        chart-type="donut",
        data-chart-max="6",
        data-chart-segments="{ '0':['0','2','#19C5F5'] }",
        data-chart-text="2", 
        data-chart-caption="Prodyšnost",
        data-chart-initial-rotate="0">
    </div>

    <div
        id="failureChart2",
        chart-type="donut",
        data-chart-max="6",
        data-chart-segments="{ '0':['0','4','#19C5F5'] }",
        data-chart-text="4", 
        data-chart-caption="Větrnost",
        data-chart-initial-rotate="0">
    </div>

</div>

Lze využít předdefinovaných stylů pro různé velikosti grafů: tiny-chartbox, large-chartbox, huge-chartbox, giant-chartbox.

Zápis hodnot grafu je uveden v atributu data-chart-segment="{ "0":["0","1400","#F18605"], "1":["1400","600", "#ecebeb"] }"

Javascript kód

function createDonutCharts() {
    $("<style type='text/css' id='dynamic' />").appendTo("head");
    $("div[chart-type*=donut]").each(function () {
        var d = $(this);
        var id = $(this).attr('id');
        var max = $(this).data('chart-max');
        if ($(this).data('chart-text')) {
            var text = $(this).data('chart-text');
        } else {
            var text = "";
        }
        if ($(this).data('chart-caption')) {
            var caption = $(this).data('chart-caption');
        } else {
            var caption = "";
        }
        if ($(this).data('chart-initial-rotate')) {
            var rotate = $(this).data('chart-initial-rotate');
        } else {
            var rotate = 0;
        }
        var segments = $(this).data('chart-segments');

        for (var i = 0; i < Object.keys(segments).length; i++) {
            var s = segments[i];
            var start = ((s[0] / max) * 360) + rotate;
            var deg = ((s[1] / max) * 360);
            if (s[1] >= (max / 2)) {
                d.append('<div class="large donut-bite" data-segment-index="' + i + '"> ');
            } else {
                d.append('<div class="donut-bite" data-segment-index="' + i + '"> ');
            }
            var style = $("#dynamic").text() + "#" + id + " .donut-bite[data-segment-index=\"" + i + "\"]{-moz-transform:rotate(" + start + "deg);-ms-transform:rotate(" + start + "deg);-webkit-transform:rotate(" + start + "deg);-o-transform:rotate(" + start + "deg);transform:rotate(" + start + "deg);}#" + id + " .donut-bite[data-segment-index=\"" + i + "\"]:BEFORE{-moz-transform:rotate(" + deg + "deg);-ms-transform:rotate(" + deg + "deg);-webkit-transform:rotate(" + deg + "deg);-o-transform:rotate(" + deg + "deg);transform:rotate(" + deg + "deg); background-color: " + s[2] + ";}#" + id + " .donut-bite[data-segment-index=\"" + i + "\"]:BEFORE{ background-color: " + s[2] + ";}#" + id + " .donut-bite[data-segment-index=\"" + i + "\"].large:AFTER{ background-color: " + s[2] + ";}";
            $("#dynamic").text(style);
        }

        d.children().first().before("<div class='donut-hole'><span class='donut-filling'>" + text + "</span></div>");
        d.append("<div class='donut-caption-wrapper'><span class='donut-caption'>" + caption + "</span></div>");
    });
}

$(document).ready(function() {
    createDonutCharts();
});

SCSS kód

Ke stažení v četně všech předchozích souborů. Download