Ako vytvoriť animované grafy v HTML5: Chart.js

charts-js

Grafy sú oveľa lepšie pre vizuálne zobrazovanie dát ako tabuľky. Sú jednoduchšie a prehľadnejšie na zobrazovanie rôznych údajov a štatistík – no vytvoriť ich na web stránke nie je vždy také jednoduché.

Skvelý spôsob ako začať s grafmi je Chart.js – JavaScript plugin, ktorý používa HTML5 canvas element, aby vykreslil graf na web stránku. Plugin Chart.js  je dobre zdokumentovaný a umožňuje vytvárať všetky druhy grafov: čiarové grafy, stĺpcové grafy, koláčové grafy a ďalšie – a to neuveriteľne ľahko.

Aby sme si ukázali, ako používať chart.js –  vytvoríme si sadu 3 grafov:

  • Prvý bude zobrazovať počet kupujúcich fiktívneho výrobku počas 6 mesiacov (čiarový graf)
  • Druhý bude zobrazovať krajiny, odkiaľ pocháchajú zákazníci (koláčový graf)
  • Tretí bude znázorňovať zisk za dané obdobie (stĺpcový graf)

Začíname

Prvá vec, ktorú musíme urobiť – je stiahnuť si Chart.js. Skopírujte Chart.min.js z rozbalenej zložky do adresára, kde si vytvoríme nový HTML súbor, do ktorého script chart.js vložíme:

<!DOCTYPE html>
<html lang="sk">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <script src='Chart.js'></script>
    </head>
    <body>
    </body>
</html>

Vytvárame čiarový graf

Ak chceme vytvoriť čiarový graf, musíme vložiť canvas element do nášho HTML, v ktorom je importovaný Chart.js, pomocou ktorého sa graf vykreslí.

<canvas id="buyers" width="600" height="400"></canvas>

Ďalej musíme napísať skript, ktorý načíta obsah elementu canvas.

<script>
    var buyers = document.getElementById('buyers').getContext('2d');
    new Chart(buyers).Line(buyerData);
</script>

Vo vnútri skriptu musíme vytvoriť naše dáta – v tomto prípade je to objekt, ktorý obsahuje popisky pre základňu nášho grafu a dátové hodnoty v grafe. Takže nad riadok „var buyers = …’ pridame naše data / hodnoty (buyerData)

var buyerData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : [203,156,99,251,305,247]
        }
    ]
}

Ak otestujete súbor v prehliadači, budete hneď vidieť animovaný čiarový graf s našimi zadanými hodnotami.

Vytvárame koláčový graf

Náš čiarový graf je kompletný, tak sa poďme presunúť na koláčový graf. Opäť vložíme canvas element:

<canvas id="countries" width="600" height="400"></canvas>

Ďalej musíme pridať obsah a vytvoriť graf

var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);

A pridáme samotný obsah grafu so všetkými dátami a ich hodnotami (pieData). Dáta budú trošku odlišné, pretože koláčový graf je jednoduchší a stačí nám priradiť hodnoty a farby. Tentoraz budeme dodávať aj niektoré možnosti grafu (pieOptions).

var pieData = [
    {
        value: 20,
        color:"#878BB6"
    },
    {
        value : 40,
        color : "#4ACAB4"
    },
    {
        value : 10,
        color : "#FF8153"
    },
    {
        value : 30,
        color : "#FFEA88"
    }
];

A teraz, po zadaní pieData pridáme naše možnosti pieOptions:

var pieOptions = {
    segmentShowStroke : false,
    animateScale : true
}

Tieto možnosti robia dve veci: najskôr odstraňujú ťah zo segmentov a potom sa vytvorí animácia koláčového grafu tak, že sa priblíži z ničoho.

Vytvárame stĺpcový graf

A na záver – poďme pridať stĺpcový graf do našej stránky. Syntax stĺpcového grafu je veľmi podobná čiarovému grafu, ktorý uz máme hotový. Opäť pridáme canvas element:

<canvas id="income" width="600" height="400"></canvas>

Ďalej načítame obsah do canvas a vytvoríme graf:

var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);

A konečne – pridáme dáta do čiarového grafu:

var barData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "#48A497",
            strokeColor : "#48A4D1",
            data : [456,479,324,569,702,600]
        },
        {
            fillColor : "rgba(73,188,170,0.4)",
            strokeColor : "rgba(72,174,209,0.4)",
            data : [364,504,605,400,345,320]
        }

    ]
}

Ako môžete vidieť, dáta sú z veľkej časti rovnaké, no tentokrát sme použili RGBA pre definíciu farby, ktorá nám umožňuje pridať priehľadnosť.

Môžete si pozrieť ukážku v akcii (zobraziť demo), prípadne si môžete celý HTML kód prekopírovať:

<!DOCTYPE html>
<html lang="sk">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <!-- import plugin script -->
        <script src='Chart.js'></script>
    </head>
    <body>
        <!-- line chart canvas element -->
        <canvas id="buyers" width="600" height="400"></canvas>
        <!-- pie chart canvas element -->
        <canvas id="countries" width="600" height="400"></canvas>
        <!-- bar chart canvas element -->
        <canvas id="income" width="600" height="400"></canvas>
        <script>
            // line chart data
            var buyerData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                {
                    fillColor : "rgba(172,194,132,0.4)",
                    strokeColor : "#ACC26D",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [203,156,99,251,305,247]
                }
            ]
            }
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            new Chart(buyers).Line(buyerData);
            // pie chart data
            var pieData = [
                {
                    value: 20,
                    color:"#878BB6"
                },
                {
                    value : 40,
                    color : "#4ACAB4"
                },
                {
                    value : 10,
                    color : "#FF8153"
                },
                {
                    value : 30,
                    color : "#FFEA88"
                }
            ];
            // pie chart options
            var pieOptions = {
                 segmentShowStroke : false,
                 animateScale : true
            }
            // get pie chart canvas
            var countries= document.getElementById("countries").getContext("2d");
            // draw pie chart
            new Chart(countries).Pie(pieData, pieOptions);
            // bar chart data
            var barData = {
                labels : ["January","February","March","April","May","June"],
                datasets : [
                    {
                        fillColor : "#48A497",
                        strokeColor : "#48A4D1",
                        data : [456,479,324,569,702,600]
                    },
                    {
                        fillColor : "rgba(73,188,170,0.4)",
                        strokeColor : "rgba(72,174,209,0.4)",
                        data : [364,504,605,400,345,320]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);
        </script>
    </body>
</html>

Výhodou Chart.js je, že je veľmi jednoduchý, ľahko sa používa a je skutočne veľmi flexibilný. Navyše, akonáhle ste zvládli základy v našich príkladoch, môžete sa pohrať s veľkým množstvom možností a nastavení, ktoré sú uvedené v dokumentácii.