Kā izveidot vienkāršu diagrammu, izmantojot Chart.js

Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Datu vizualizācija cilvēkiem saprotamā veidā ir ļoti svarīga uz datiem balstītu lēmumu pieņemšanas laikmetā. Diagrammas un diagrammas palīdz mums viegli saprast sarežģītus datus, tendences un modeļus.

MUO dienas video RITINĀT, LAI TURPINĀTU AR SATURU

Izpētīsim, kā izveidot vienkāršu diagrammu, izmantojot Chart.js — populāru JavaScript bibliotēku datu vizualizācijai.

Kas ir Chart.js?

Chart.js ir bezmaksas rīks, kas palīdz izstrādātājiem izveidot interaktīvas diagrammas tīmekļa lietotnēm. HTML5 kanvas elements atveido diagrammas, ļaujot tām darboties mūsdienu pārlūkprogrammās.

Chart.js funkcijas

Funkcijas ietver:

Chart.js izceļas ar lietotājam draudzīgu pieeju. Izmantojot minimālu kodu, izstrādātāji var izveidot interaktīvas un vizuāli pievilcīgas diagrammas.
Bibliotēka ir daudzpusīga un atbalsta dažādus diagrammu veidus, piemēram, līnijas, stieņus, pīrāgus un radarus. Tas var apmierināt dažādas datu reprezentācijas vajadzības.
Chart.js izstrādā diagrammas, lai tās labi darbotos galddatoros un mobilajās ierīcēs. Viņi ir atsaucīgi un pielāgojami.
Varat mainīt Chart.js diagrammas, izmantojot daudzas opcijas, nevis noklusējuma iestatījumus. Izstrādātāji var precīzi noregulēt diagrammas, lai tās atbilstu īpašām prasībām.

Vides iestatīšana

Bibliotēku var iestatīt vienā no diviem veidiem:

Izmantojot CDN . Vienkārši iekļaujiet tālāk norādīto skripta tagu sava HTML dokumenta galvā.
```
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
```
Izmantojot pakotņu pārvaldnieku. Ja vēlaties pakotņu pārvaldniekus, varat instalēt Chart.js, izmantojot npm, mezgla pakotņu pārvaldnieks :
```
 npm install chart.js
```
Vai dzija:
```
 yarn add chart.js
```

HTML pamata struktūra

Lai iegultu diagrammu, HTML kodā ir nepieciešams kanvas elements. Šeit ir pamatstruktūra:

kā lejupielādēt visas fotogrāfijas no samsung mākonis

 <!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>

Lai veidotu lapas stilu, izveidojiet failu, stils.css un pievienojiet tam šādu 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; 
} 
 
h1 { 
  font-size: 3rem; 
  color: #333; 
  text-align: center; 
  padding: 3rem; 
}

Pirmās diagrammas izveide: joslu diagrammas piemērs

Šajā piemērā mēs izmantosim joslu diagrammu, kas ir ideāli piemērota atsevišķu datu punktu salīdzināšanai pēc kategorijas.

Iekš skripts tagu HTML apakšā, sāciet ar kanvas elementa atlasi, izmantojot tā id rekvizītu:
```
 let canvas = document.getElementById('myChart');
```
Pēc tam iegūstiet kontekstu, kā renderēt diagrammu. Šajā gadījumā tas ir 2D zīmējuma konteksts.
```
 let ctx = canvas.getContext('2d');
```
Pēc tam inicializējiet jaunu diagrammu uz audekla, izmantojot Diagramma() funkciju. Šī funkcija kā pirmo argumentu izmanto audekla kontekstu, pēc tam opciju objektu, tostarp diagrammā attēlojamos datus.
```
 let options = {}; 
let myChart = new Chart(canvas, options); 
```

Pēc tam aizpildiet opciju objektu, lai norādītu diagrammas veidu, datus un iezīmes, kuras vēlaties diagrammā.

 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], 
    }], 
  }, 
};

Pašlaik jūsu diagramma izskatās šādi:

Diagrammas veidošana un pielāgošana

Chart.js piedāvā daudzas iespējas, lai pielāgotu diagrammas, piemēram:

Krāsas : pielāgojiet diagrammas krāsas, sākot no joslu fona līdz līniju apmalēm, izmantojot Chart.js.
Leģendas : skaidrības labad novietojiet leģendas augšpusē, apakšā, pa kreisi vai pa labi.
Rīku padomi : Izmantojiet rīka padomus, lai iegūtu detalizētu ieskatu datu punktos, kas tiek rādīti, virzot kursoru.
Animācijas : iestatiet diagrammas animācijas stilu un tempu dinamiskam attēlojumam.

Kā vienkāršu piemēru varat iestatīt dažus datu kopas pamatstilus, šādi mainot opciju objektu:

 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, 
    }], 
  }, 
};

Jūsu diagrammai tagad vajadzētu izskatīties šādi:

Paraugprakse un darbības padomi

Lai nodrošinātu optimālu veiktspēju, renderējot diagrammas:

Ierobežojiet Chart.js izmantotos datu punktus, lai nodrošinātu ātrāku renderēšanu un labāku lietotāja pieredzi.
Ja diagrammu bieži atjaunināt, pirms jaunas diagrammas renderēšanas izmantojiet metodi iznīcināt(), lai noņemtu veco diagrammu.

Padomi, kā izvairīties no bieži sastopamām kļūmēm

Šeit ir dažas nepilnības, no kurām jāizvairās:

windows 10 windows atslēga pārstāja darboties

Pārliecinieties, ka jūsu dati vienmēr ir formatēti vienādi, lai izvairītos no pārsteigumiem.
Lai uzlabotu veiktspēju, vislabāk ir ierobežot animācijas. Lai gan tie var palīdzēt uzlabot lietotāja pieredzi, pārāk daudz izmantošana var radīt problēmas.

Chart.js: tīmekļa datu vizualizācijas veicināšana

Chart.js ir noderīgs rīks, ja vēlaties interaktīvos datus attēlot pievilcīgā veidā. Varat viegli izveidot skaistas datu vizualizācijas, kas sniedz ieskatu un informē lēmumus.

Chart.js nodrošina spēcīgu risinājumu datu vizualizēšanai neatkarīgi no tā, vai esat pieredzējis vai iesācējs.