Com crear un gràfic senzill amb Chart.js

Lectors com tu ajuden a donar suport a MUO. Quan feu una compra mitjançant enllaços al nostre lloc, podem guanyar una comissió d'afiliats. Llegeix més.

Visualitzar les dades d'una manera que la gent pugui entendre és molt important en l'era de la presa de decisions basada en dades. Els gràfics i els gràfics ens ajuden a entendre fàcilment dades, tendències i patrons complexos.

MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT

Explorem com crear un gràfic senzill amb Chart.js, una popular biblioteca de JavaScript per a la visualització de dades.

com tenir un fons de pantalla animat

Què és Chart.js?

Chart.js és una eina gratuïta que ajuda els desenvolupadors a crear gràfics interactius per a aplicacions web. L'element de llenç HTML5 representa els gràfics, cosa que els permet treballar en navegadors moderns.

Característiques de Chart.js

Les característiques inclouen:

Chart.js destaca pel seu enfocament fàcil d'utilitzar. Amb un codi mínim, els desenvolupadors poden crear gràfics interactius i visualment atractius.
La biblioteca és versàtil i admet diferents tipus de gràfics com línies, barres, pastissos i radars. Pot satisfer diverses necessitats de representació de dades.
Chart.js dissenya gràfics perquè funcionin bé en dispositius d'escriptori i mòbils. Són sensibles i adaptables.
Podeu canviar els gràfics de Chart.js utilitzant moltes opcions en lloc de la configuració predeterminada. Els desenvolupadors poden ajustar els gràfics per adaptar-los a requisits específics.

Configuració de l'entorn

Podeu configurar la biblioteca de dues maneres:

Utilitzant un CDN . Simplement incloeu l'etiqueta d'script següent al capçalera del vostre document HTML.
```
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
```
Utilitzant un gestor de paquets. Si preferiu gestors de paquets, podeu instal·lar Chart.js utilitzant npm, el gestor de paquets de nodes :
```
 npm install chart.js
```
O fil:
```
 yarn add chart.js
```

Estructura bàsica d'HTML

Per inserir un gràfic, necessitareu un element de llenç al vostre HTML. Aquí teniu una estructura bàsica:

 <!DOCTYPE html> 
<html lang="en"> 
 <head> 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
   <title>Document</title> 
   <link rel="stylesheet" href="./style.css" /> 
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
 </head> 
 
 <body> 
   <h1>Welcome to My Data Representation</h1> 
   <canvas id="myChart" width="400" height="150"></canvas> 
  <script></script> 
 </body> 
</html>

Per estilitzar la pàgina, creeu un fitxer, estil.css , i afegiu-hi el següent CSS:

windows 10 com canviar la brillantor

 @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; 
} 
 
h1 { 
  font-size: 3rem; 
  color: #333; 
  text-align: center; 
  padding: 3rem; 
}

Elaboració del vostre primer gràfic: un exemple de gràfic de barres

Per a aquest exemple, utilitzarem un gràfic de barres, ideal per comparar punts de dades individuals per categoria.

En el guió etiqueta a la part inferior del vostre HTML, comenceu seleccionant l'element del llenç amb la seva propietat id:
```
 let canvas = document.getElementById('myChart');
```
A continuació, obteniu un context de com representar el vostre gràfic. En aquest cas, és un context de dibuix en 2D.
```
 let ctx = canvas.getContext('2d');
```
A continuació, inicialitzeu un gràfic nou al llenç amb l'opció Gràfic() funció. Aquesta funció pren el context del llenç com a primer argument, després un objecte d'opcions que inclou les dades per mostrar al gràfic.
```
 let options = {}; 
let myChart = new Chart(canvas, options); 
```

A continuació, empleneu l'objecte d'opcions per especificar el tipus de gràfic, les dades i les etiquetes que voleu al gràfic.

 let options = { 
  type: "bar", 
 
  data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
      label: "Total number of votes on favourite color", 
      data: [12, 19, 3, 5, 2, 3], 
    }], 
  }, 
};

De moment, el vostre gràfic té aquest aspecte:

Estil i personalització del gràfic

Chart.js ofereix una multitud d'opcions per personalitzar gràfics com ara:

Colors : Personalitzeu els colors dels gràfics, des de fons de barres fins a vores de línies, amb Chart.js.
Llegendes : Col·loqueu les llegendes a la part superior, inferior, esquerra o dreta per a més claredat.
Consells d'eines : Utilitzeu els consells sobre eines per obtenir informació detallada als punts de dades que apareixen al passar el cursor.
Animacions : estableix l'estil i el ritme de les animacions de gràfics per a una visualització dinàmica.

Com a exemple senzill, podeu establir alguns estils bàsics per al vostre conjunt de dades canviant l'objecte d'opcions de la següent manera:

 let options = { 
  type: "bar", 
 
  data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
      label: "Total number of votes on favourite color", 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: "rgba(75, 192, 192, 0.2)", 
      borderColor: "rgba(75, 192, 192, 1)", 
      borderWidth: 1, 
    }], 
  }, 
};

El vostre gràfic hauria de semblar ara:

com executar el diagnòstic de maquinari a Windows 10

Bones pràctiques i consells de rendiment

Per garantir un rendiment òptim en renderitzar gràfics:

Limiteu els punts de dades utilitzats a Chart.js per a una representació més ràpida i una millor experiència d'usuari.
Si actualitzeu un gràfic amb freqüència, utilitzeu el mètode destroy() per eliminar el gràfic antic abans de representar-ne un de nou.

Consells per evitar trampes habituals

Aquí hi ha algunes trampes que cal evitar:

Assegureu-vos que les vostres dades estiguin sempre formatades de la mateixa manera per evitar sorpreses.
Per millorar el rendiment, el millor és limitar les animacions. Tot i que poden ajudar a millorar l'experiència de l'usuari, utilitzar-ne massa pot causar problemes.

Chart.js: Potenciar la visualització de dades web

Chart.js és una eina útil quan voleu mostrar dades interactives d'una manera atractiva. Podeu crear fàcilment visualitzacions de dades boniques que proporcionin informació i decisions informades.

Chart.js ofereix una solució sòlida per visualitzar les dades, tant si teniu experiència com si teniu un principi de desenvolupament.