oktató videó - tanfolyam

Seregnyi kész diagram, grafikon készítő PHP és Javascipt könyvtár van, az egyik a sok közül az RGraph (a minified verzió letöltése javasolt). Az RGraph előnye hogy ingyenes, nincs semmilyen függősége más megoldásoktól, önmagában és egyszerűen használható. Pár sor kóddal megjeleníthető egy grafikon, de ennek ellenére elég nagy tudású és részletesen testreszabható.

Használat

A használatához két fájl behívása szükséges:

<script src="RGraph.svg.common.core.js"></script>

Ez az alap.

És az aktuális grafikon típusnak megfelelő Javascript fájl. Például az oszlop diagram:

<script src="RGraph.svg.bar.js"></script>

Szükséges egy tartalmazó elem a HTML-ben, pl. egy div:

<div style="width: 750px; height: 300px" id="chart-container"></div>

A div szélessége megadható, amihez igazodik.

Egy minimál grafikon így nézhet ki:

<script>

    bar = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [8,5,9,3,5,2,4]
    }).draw();

</script>

Vagyis meg kell adni a tartalmazó elemet ("chart-container") majd a megjelenítendő adatokat: data: [8,5,9,3,5,2,4]

Ennek hatására generálja a grafikont:




Ez így nem rossz, de azért esetleg egy grafikon cím, oszlop színek, stb. jó lenne. Ezek megadhatók a beállításokkal.

Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!

Beállítások

<script>

    bar = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [8,5,9,3,5,2,4],

options: {
            ..............
        }

    }).draw();

</script>

A példákból nagyon jól kiolvashatók a beállítási lehetőségek. A legfontosabbak:

<script>
   
    bar = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [8,5,9,3,5,2,4],
        options: {
            title: 'Ez egy grafikon',
            titleSubtitle: 'Ez egy alcím',
            xaxisLabels: [
                'Első',
                'Második',
                'Harmadik',
                'Negyedik',
                'Ötödik',
                'Hatodik',
                'Hetediknsortörés is van'
            ],
            marginBottom: 75,
            marginTop: 50,
            hmargin: 10,
            colors: ['#12ad28']
           
             
            }
    }).draw();
   
</script>


title: a neve, címe

titleSubtitle: alcím

xaxisLabels: az oszlopok címkéje alul, sortörés: n

marginBottom: oszlop címek magassága

marginTop: cím + alcím magassága

hmargin: oszlopok közti távolság

colors: oszlop színe

Az alap kb. ennyi, de a példákban van még rengeteg típusú grafikon és beállítási lehetőség.