Како направити једноставан графикон са Цхарт.јс

Преглед садржаја

U savremenom dobu, kada se odluke sve više donose na osnovu podataka, vizualizacija tih podataka na način koji je ljudima razumljiv postaje ključna. Grafički prikazi i dijagrami omogućavaju nam da lako shvatimo složene informacije, trendove i obrasce.

Hajde da istražimo proces kreiranja jednostavnog grafičkog prikaza koristeći Chart.js, popularnu JavaScript biblioteku za vizualizaciju podataka.

Šta je Chart.js?

Chart.js je besplatan alat koji programerima omogućava kreiranje interaktivnih grafika za veb aplikacije. Koristi HTML5 element platna za prikaz grafika, čime se osigurava njihova funkcionalnost u svim modernim pregledačima.

Karakteristike Chart.js

Ova biblioteka nudi sledeće ključne karakteristike:

Chart.js se ističe svojom jednostavnošću upotrebe. Sa minimalnom količinom koda, programeri mogu kreirati interaktivne i vizuelno privlačne grafikone.
Biblioteka je izuzetno fleksibilna, podržavajući različite tipove grafika, uključujući linijske, trakaste, kružne i radijalne. Ovo omogućava zadovoljavanje različitih potreba za prikazivanjem podataka.
Chart.js grafikoni su dizajnirani da besprekorno funkcionišu kako na desktop, tako i na mobilnim uređajima. Oni su responsivni i prilagodljivi.
Umesto korišćenja podrazumevanih podešavanja, Chart.js grafikoni se mogu modifikovati pomoću brojnih opcija. Programeri imaju mogućnost detaljnog prilagođavanja grafika specifičnim zahtevima.

Postavljanje okruženja

Biblioteku možete postaviti na dva načina:

Osnovna HTML struktura

Da biste implementirali grafikon, potreban vam je element platna u vašem HTML-u. Evo osnovne strukture:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dokument</title>
  <link rel="stylesheet" href="https://wilku.top/how-to-build-a-simple-chart-with-chart-js/./style.css" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
<body>
  <h2>Dobrodošli u moj prikaz podataka</h2>
  <canvas id="myChart" width="400" height="150"></canvas>
 <script></script>
</body>
</html>

Za stilizovanje stranice, kreirajte datoteku `style.css` i dodajte joj sledeći CSS:

@import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 font-size: 62.5%;
}

body {
 font-family: "Tilt Neon", sans-serif;
 padding: 2rem 4rem;
}

h2 {
 font-size: 3rem;
 color: #333;
 text-align: center;
 padding: 3rem;
}

Izrada prvog grafikona: Primer trakastog grafikona

U ovom primeru koristićemo trakasti grafikon, koji je idealan za poređenje pojedinačnih podataka u okviru različitih kategorija.

Unutar `script` oznake na dnu vašeg HTML-a, započnite sa odabirom elementa platna koristeći njegov `id` atribut:
```
 let canvas = document.getElementById('myChart'); 
```
Zatim preuzmite kontekst za crtanje vašeg grafikona. U ovom slučaju, to je 2D kontekst crtanja.
```
 let ctx = canvas.getContext('2d'); 
```
Nakon toga, inicijalizujte novi grafikon na platnu koristeći funkciju `Chart()`. Ova funkcija uzima kontekst platna kao prvi argument, a zatim objekat sa opcijama koje uključuju podatke koje želite prikazati na grafikonu.
```
 let options = {};
let myChart = new Chart(canvas, options);
```

Sada popunite objekat opcija da biste odredili tip grafikona, podatke i oznake koje želite da budu prikazane na vašem grafikonu.

 let options = {
  type: "bar",

  data: {
   labels: ["Crvena", "Plava", "Žuta", "Zelena", "Ljubičasta", "Narandžasta"],

   datasets: [{
    label: "Ukupan broj glasova za omiljenu boju",
    data: [12, 19, 3, 5, 2, 3],
   }],
  },
};

Trenutno vaš grafikon izgleda ovako:

Stilizovanje i prilagođavanje grafikona

Chart.js nudi brojne opcije za prilagođavanje grafika, uključujući:

Boje: Prilagodite boje grafika, od pozadine traka do ivica linija, koristeći Chart.js.
Legende: Postavite legende na vrh, dno, levo ili desno radi bolje preglednosti.
Opisi: Koristite opise koji se pojavljuju prilikom prelaska mišem preko tačaka podataka kako biste dobili detaljniji uvid.
Animacije: Podesite stil i brzinu animacija grafika za dinamičan prikaz.

Kao jednostavan primer, možete definisati osnovne stilove za vaš skup podataka modifikujući objekat opcija na sledeći način:

 let options = {
  type: "bar",

  data: {
   labels: ["Crvena", "Plava", "Žuta", "Zelena", "Ljubičasta", "Narandžasta"],

   datasets: [{
    label: "Ukupan broj glasova za omiljenu boju",
    data: [12, 19, 3, 5, 2, 3],
    backgroundColor: "rgba(75, 192, 192, 0.2)",
    borderColor: "rgba(75, 192, 192, 1)",
    borderWidth: 1,
   }],
  },
};

Vaš grafikon bi sada trebalo da izgleda ovako:

Najbolje prakse i saveti za performanse

Da biste osigurali optimalne performanse prilikom prikazivanja grafikona:

Ograničite broj tačaka podataka koje koristite u Chart.js radi bržeg prikazivanja i boljeg korisničkog iskustva.
Ako često ažurirate grafikon, koristite metodu `destroy()` da biste uklonili stari grafikon pre prikazivanja novog.

Saveti za izbegavanje uobičajenih grešaka

Evo nekoliko grešaka koje treba izbegavati:

Uverite se da su vaši podaci uvek formatirani na isti način kako biste izbegli neprijatna iznenađenja.
Da biste poboljšali performanse, najbolje je ograničiti animacije. Iako mogu poboljšati korisničko iskustvo, njihovo prekomerno korišćenje može izazvati probleme.

Chart.js: Osnaživanje vizualizacije veb podataka

Chart.js je koristan alat kada želite da prikažete interaktivne podatke na privlačan način. Možete lako da kreirate prelepe vizualizacije podataka koje pružaju uvid i omogućavaju informisano donošenje odluka.

Bez obzira da li ste iskusni programer ili tek počinjete, Chart.js nudi moćno rešenje za vizualizaciju podataka.