Existuje pomerne málo JavaScriptových knižníc na vykresľovanie rôznych grafov, od stĺpcových grafov po čiarové grafy a ďalšie. Ak sa učíte, ako dynamicky zobrazovať údaje na svojich webových stránkach pomocou JavaScriptu, Chart.js je jednou z takýchto knižníc, ktorú by ste mali vyskúšať.

Ako môžete začať vytvárať vizualizácie údajov pomocou Chart.js? Ako na to sa dozviete v tomto článku.

Začnime.

Čo je Chart.js?

Chart.js je knižnica JavaScript na vizualizáciu údajov s otvoreným zdrojom, ktorá sa používa na vytváranie grafov vykresľovateľných HTML. V súčasnosti podporuje osem rôznych typov interaktívnych grafov, ktoré môžete animovať. Ak chcete vytvoriť graf založený na HTML pomocou chart.js, potrebujete plátno HTML, ktoré ho drží.

Knižnica akceptuje sadu množín údajov a ďalšie parametre prispôsobenia, ako je farba pozadia, farba okraja a ďalšie. Jedným zo súborov údajov je štítok, ktorý predstavuje hodnoty na osi X. Druhým je súbor číselných hodnôt, ktoré zvyčajne ležia na osi Y.

Musíte tiež zadať typ grafu v rámci objektu grafu, aby knižnica vedela, ktorý graf má vykresliť.

Ako vytvoriť grafy pomocou Chart.js

Ako sme už spomenuli, pomocou môžete vytvárať rôzne typy grafov chart.js. V tomto návode začnete čiarovými a stĺpcovými grafmi. Keď pochopíte koncept, ktorý je za nimi, budete mať všetky nástroje a istotu, ktoré potrebujete na vykreslenie ostatných dostupných grafov.

Súvisiace:Ako zabezpečiť, aby bol váš web responzívny a interaktívny pomocou CSS a JavaScriptu

Ak chcete začať používať chart.js, vytvorte potrebné súbory. Pre tento tutoriál sú názvy súborov chart.html, plot.jsa index.css. Pre súbory môžete použiť akúkoľvek konvenciu pomenovania.

Teraz vložte nasledujúce do hlavu časť vášho súboru HTML na prepojenie na sieť na doručovanie obsahu Chart.js (CDN).

In chart.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Ďalej vytvorte HTML plátno, na ktorom bude graf držať a dať mu ID. Pripojte sa tiež k súboru CSS (index.css) v súbore hlavu a ukážte na svoj súbor JavaScript (plot.js) v súbore telo oddiele.

Štruktúra súboru HTML vyzerá takto:

 Grafy

A vo vašom CSS:

telo{
 farba pozadia:#383735;
}
h1{
 farba:#e9f0e9;
 ľavý okraj: 43 %;
}
#plots{
 okraj: auto;
 farba pozadia: #2e2d2d;
}

Vyššie uvedený štýl CSS nie je stanovený konvenciou. Takže si môžete svoj štýl upraviť, ako chcete, v závislosti od vašej štruktúry DOM. Keď sú vaše súbory HTML a CSS pripravené, je čas na vykreslenie grafov pomocou JavaScriptu.

Čiarový graf

Ak chcete vytvoriť čiarový graf s chart.js, nastavíte graf typu do riadok. Toto povie knižnici, aby nakreslila čiarový graf.

Ak to chcete demonštrovať, vo svojom súbore JavaScript:

// Získajte HTML plátno podľa jeho id
parcely = document.getElementById("plots");
// Príklad množín údajov pre osi X a Y
var mesiace = ["Ján", "Feb", "Mar", "Apr", "Máj", "Jún", "Júl"]; //Zostane na osi X
návštevnosť var = [65, 59, 80, 81, 56, 55, 60] //Zostane na osi Y
// Vytvorenie inštancie objektu Chart:
nový graf (zákresy, {
 typ: 'riadok', //Deklarujte typ grafu
 údaje: {
 štítky: mesiace, //Údaje osi X
 množiny údajov: [{
 údaje: návštevnosť, //Údaje osi Y
 backgroundColor: '#5e440f',
 borderFarba: 'biela',
 vyplniť: nepravda, //Vyplní krivku pod čiarou farbou pozadia. Štandardne je to pravda
 }]
 },
});

Výkon:

Neváhajte a zmeňte vyplniť hodnotu do pravda, použite viac údajov alebo upravte farby, aby ste videli, čo sa stane.

Ako tiež môžete vidieť, v hornej časti grafu je malé pole s legendou. Môžete to odstrániť vo voliteľnom zariadení možnosti parameter.

The možnosti Parameter tiež pomáha s ďalšími prispôsobeniami okrem odstránenia alebo zahrnutia legendy. Môžete ho napríklad použiť na vynútenie začiatku osi od nuly.

Vyhlásiť an možnosti parameter, takto vyzerá časť grafu vo vašom súbore JavaScript:

// Vytvorenie inštancie objektu Chart:
nový graf (zákresy, {
 typ: 'riadok', //Deklarujte typ grafu
 údaje: {
 štítky: mesiace, //Údaje osi X
 množiny údajov: [{
 údaje: návštevnosť, //Údaje osi Y
 backgroundColor: '#5e440f', //Farba bodiek
 borderFarba: 'biela', //Farba čiary
 vyplniť: nepravda, //Vyplní krivku pod čiarou farbou pozadia. Štandardne je to pravda
 }]
 },
 //Určite vlastné možnosti:
 možnosti:{
 legenda: {zobraziť: nepravda}, //Odstráňte pole legendy nastavením na hodnotu false. Štandardne je to pravda.
//Určite nastavenia pre váhy. Napríklad, aby os Y začínala od nuly:
 váhy:{
 yAxes: [{ticks: {min: 0}}] //To isté môžete zopakovať pre os X, ak obsahuje celé čísla.
 }
 } 
});

Výkon:

Pre každý bod môžete použiť aj iné farby pozadia. Zmena farieb pozadia týmto spôsobom je však zvyčajne užitočnejšia pri stĺpcových grafoch.

Vytváranie stĺpcových grafov pomocou Chart.js

Tu stačí zmeniť graf typu do bar. Nemusíte nastavovať vyplniť možnosť, pretože pruhy automaticky zdedia farbu pozadia:

// Vytvorenie inštancie objektu Chart:
nový graf (zákresy, {
 typ: 'bar', //Deklarujte typ grafu
 údaje: {
 štítky: mesiace, //Údaje osi X
 množiny údajov: [{
 údaje: návštevnosť, //Údaje osi Y
 backgroundColor: '#3bf70c', //Farba pruhov
 }]
 },
 možnosti:{
 legenda: {zobraziť: nepravda}, //Odstráňte pole legendy nastavením na hodnotu false. Štandardne je to pravda.
 }
});

Výkon:

Nebojte sa prinútiť os Y začať od nuly alebo akejkoľvek hodnoty, ako ste to urobili v prípade čiarového grafu.

Súvisiace:Metódy poľa JavaScript, ktoré by ste mali ovládať

Ak chcete použiť rôzne farby pre každý pruh, odovzdajte do poľa pole farieb, ktoré zodpovedá počtu položiek vo vašich údajoch farba pozadia parameter:

// Vytvorenie inštancie objektu Chart:
nový graf (zákresy, {
 typ: 'bar', //Deklarujte typ grafu
 údaje: {
 štítky: mesiace, //Údaje osi X
 množiny údajov: [{
 údaje: návštevnosť, //Údaje osi Y
//Farba každého pruhu:
 farba pozadia: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 možnosti:{
 legenda: {zobraziť: nepravda}, //Odstráňte pole legendy nastavením na hodnotu false. Štandardne je to pravda.
 }
});

Výkon:

Vytvorenie koláčového grafu pomocou Chart.js

Ak chcete nakresliť koláčový graf, zmeňte typ grafu na koláč. Môžete tiež nastaviť zobrazenie legendy na pravda aby ste videli, čo každý segment koláča predstavuje:

// Vytvorenie inštancie objektu Chart:
nový graf (zákresy, {
 typ: 'koláč', //Deklarujte typ grafu
 údaje: {
 labels: months, //Definuje každý segment
 množiny údajov: [{
 údaje: návštevnosť, //určuje veľkosť segmentu
 //Farba každého segmentu
 farba pozadia: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 možnosti:{
 legenda: {display: true}, //Toto je štandardne pravda.
}
});

Výkon:

Ako ste to urobili vo vyššie uvedených príkladoch, môžete vyskúšať ďalšie grafy zmenou typu.

Tu je však zoznam podporovaných chart.js typy grafov, ktoré môžete vyskúšať pomocou vyššie uvedených konvencií kódovania:

• bar
• riadok
• rozhadzovať
• Šiška
• koláč
• radar
• polárna oblasť
• bublina

Hrajte sa s Chart.js

Aj keď ste sa v tomto návode dostali len k čiarovým, koláčovým a stĺpcovým grafom, vzor kódu na vykresľovanie iných grafov pomocou chart.js sa riadi rovnakými konvenciami. Takže pokojne sa hrajte aj s ostatnými.

Ak teda chcete viac, ako ponúka súbor chart.js, možno by ste sa mali pozrieť aj na niektoré ďalšie knižnice grafov JavaScript.

6 rámcov JavaScript, ktoré sa oplatí naučiť

Existuje veľa rámcov JavaScriptu, ktoré vám pomôžu s vývojom. Tu sú niektoré, ktoré by ste mali vedieť.

Prečítajte si ďalej

O autorovi