Ir dažas JavaScript bibliotēkas dažādu diagrammu zīmēšanai, sākot no joslu diagrammām līdz līniju diagrammām un daudz ko citu. Ja mācāties, kā dinamiski parādīt datus savā vietnē, izmantojot JavaScript, Chart.js ir viena no šādām bibliotēkām, kas jums jāizmēģina.

Kā sākt datu vizualizāciju izveidi, izmantojot Chart.js? Jūs uzzināsit, kā to izdarīt šajā rakstā.

Sāksim.

Kas ir Chart.js?

Chart.js ir atvērtā pirmkoda datu vizualizācijas JavaScript bibliotēka, ko izmanto, lai attēlotu HTML renderējamas diagrammas. Pašlaik tas atbalsta astoņus dažādus interaktīvu diagrammu veidus, kurus varat arī animēt. Lai izveidotu uz HTML balstītu grafiku ar chart.js, ir nepieciešams HTML audekls, lai to turētu.

Bibliotēka pieņem datu kopu kopu un citus pielāgošanas parametrus, piemēram, fona krāsu, apmales krāsu un citus parametrus. Viena no datu kopām ir etiķete, kas apzīmē vērtības uz X ass. Otra ir skaitlisko vērtību kopa, kas parasti atrodas uz Y ass.

Diagrammas objektā ir jānorāda arī diagrammas veids, lai bibliotēka zinātu, kuru grafiku attēlot.

Kā izveidot diagrammas, izmantojot Chart.js

Kā jau minējām iepriekš, ar palīdzību varat izveidot dažāda veida diagrammas diagramma.js. Šajā apmācībā jūs sākat ar līniju un joslu diagrammām. Tiklīdz jūs sapratīsit šo jēdzienu, jums būs visi rīki un pārliecība, kas jums nepieciešama, lai izveidotu citas pieejamās diagrammas.

Saistīts:Kā padarīt savu vietni atsaucīgu un interaktīvu, izmantojot CSS un JavaScript

Lai sāktu lietot diagramma.js, izveidojiet nepieciešamos failus. Šajā apmācībā failu nosaukumi ir diagramma.html, plot.js, un index.css. Failiem varat izmantot jebkuru nosaukumu piešķiršanas principu.

Tagad ielīmējiet tālāk norādīto galvu HTML faila sadaļu, lai izveidotu saiti uz Chart.js satura piegādes tīklu (CDN).

In diagramma.html:

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

Pēc tam izveidojiet HTML audekls, lai saglabātu diagrammu un piešķirtu tai ID. Tāpat izveidojiet savienojumu ar CSS (index.css) failu galvu sadaļu un norādiet uz JavaScript (plot.js) failu ķermenis sadaļā.

HTML faila struktūra izskatās šādi:

 Diagrammas

Un tavā CSS:

ķermenis{
 background-color:#383735;
}
h1{
 krāsa:#e9f0e9;
 piemale-kreisais: 43%;
}
#plots{
 piemale: auto;
 fona krāsa: #2e2d2d;
}

Iepriekš minētais CSS stils nav noteikts. Tātad jūs varat veidot savu stilu, kā vēlaties, atkarībā no jūsu DOM struktūras. Kad jūsu HTML un CSS faili ir gatavi, ir pienācis laiks izveidot diagrammas, izmantojot JavaScript.

Līniju diagramma

Lai izveidotu līniju diagrammu ar diagramma.js, jūs iestatīsit diagrammu veids uz līnija. Tas liek bibliotēkai uzzīmēt līniju diagrammu.

Lai to parādītu, savā JavaScript failā:

// Iegūstiet HTML audeklu pēc tā ID
plots = document.getElementById("plots");
// Datu kopu piemēri X un Y asīm
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; //Paliek uz X ass
mainīgā satiksme = [65, 59, 80, 81, 56, 55, 60] //Paliek uz Y ass
// Izveidojiet diagrammas objekta gadījumu:
jauna diagramma (plots, {
 ierakstiet: "līnija", //Deklarējiet diagrammas veidu
 dati: {
 etiķetes: mēneši, //X-ass dati
 datu kopas: [{
 dati: satiksme, //Y ass dati
 fona krāsa: '#5e440f',
 apmales krāsa: "balta",
 aizpildīt: nepatiess, //Aizpilda līkni zem līnijas ar pamatkrāsu. Tā ir taisnība pēc noklusējuma
 }]
 },
});

Izvade:

Jūtieties brīvi mainīt aizpildīt vērtību līdz taisnība, izmantojiet vairāk datu vai pielāgojiet krāsas, lai redzētu, kas notiek.

Kā arī redzat, diagrammas augšpusē ir mazs leģendu lodziņš. Varat to noņemt izvēles sadaļā iespējas parametrs.

The iespējas parametrs palīdz arī veikt citus pielāgojumus, izņemot leģendas noņemšanu vai iekļaušanu. Piemēram, varat to izmantot, lai piespiestu asi sākt no nulles.

Lai deklarētu an iespējas parametru, diagrammas sadaļa izskatās jūsu JavaScript failā:

// Izveidojiet diagrammas objekta gadījumu:
jauna diagramma (plots, {
 ierakstiet: "līnija", //Deklarējiet diagrammas veidu
 dati: {
 etiķetes: mēneši, //X-ass dati
 datu kopas: [{
 dati: satiksme, //Y ass dati
 fona krāsa: '#5e440f', //Punktu krāsa
 apmales krāsa: "balta", //Līnijas krāsa
 aizpildīt: nepatiess, //Aizpilda līkni zem līnijas ar pamatkrāsu. Tā ir taisnība pēc noklusējuma
 }]
 },
 //Norādiet pielāgotas opcijas:
 opcijas:{
 leģenda: {displejs: false}, //Noņemiet leģendas lodziņu, iestatot to uz false. Tā ir taisnība pēc noklusējuma.
//Norādiet svaru iestatījumus. Piemēram, lai Y ass sāktu no nulles:
 svari:{
 yAses: [{atzīmē: {min: 0}}] //To pašu var atkārtot ar X asi, ja tajā ir veseli skaitļi.
 }
 } 
});

Izvade:

Katram punktam varat izmantot arī dažādas fona krāsas. Tomēr fona krāsu mainīšana šādā veidā parasti ir noderīgāka, izmantojot joslu diagrammas.

Joslu diagrammu veidošana ar Chart.js

Šeit jums ir jāmaina tikai diagramma veids uz bārs. Jums nav jāiestata aizpildīt opciju, jo joslas automātiski pārņem fona krāsu:

// Izveidojiet diagrammas objekta gadījumu:
jauna diagramma (plots, {
 tips: "bārs", //Deklarējiet diagrammas veidu
 dati: {
 etiķetes: mēneši, //X-ass dati
 datu kopas: [{
 dati: satiksme, //Y ass dati
 fona krāsa: #3bf70c, //Stieņu krāsa
 }]
 },
 opcijas:{
 leģenda: {displejs: false}, //Noņemiet leģendas lodziņu, iestatot to uz false. Tā ir taisnība pēc noklusējuma.
 }
});

Izvade:

Jūtieties brīvi piespiest Y asi sākt no nulles vai jebkuras vērtības, kā to darījāt līniju diagrammai.

Saistīts:JavaScript masīva metodes, kuras jums vajadzētu apgūt

Lai katrai joslai izmantotu dažādas krāsas, ievadiet krāsu masīvu, kas atbilst jūsu datu vienumu skaitam fona krāsa parametrs:

// Izveidojiet diagrammas objekta gadījumu:
jauna diagramma (plots, {
 tips: "bārs", //Deklarējiet diagrammas veidu
 dati: {
 etiķetes: mēneši, //X-ass dati
 datu kopas: [{
 dati: satiksme, //Y ass dati
//Katras joslas krāsa:
 fona krāsa: [
 "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)"],
 }]
 },
 opcijas:{
 leģenda: {displejs: false}, //Noņemiet leģendas lodziņu, iestatot to uz false. Tā ir taisnība pēc noklusējuma.
 }
});

Izvade:

Sektoru diagrammas izveide ar Chart.js

Lai zīmētu sektoru diagrammu, mainiet diagrammas veidu uz pīrāgs. Varat arī iestatīt leģendas displeju uz taisnība lai redzētu, ko attēlo katrs pīrāga segments:

// Izveidojiet diagrammas objekta gadījumu:
jauna diagramma (plots, {
 tips: 'pīrāgs', //Deklarējiet diagrammas veidu
 dati: {
 etiķetes: mēneši, //Definē katru segmentu
 datu kopas: [{
 dati: satiksme, //Nosaka segmenta lielumu
 //Katra segmenta krāsa
 fona krāsa: [
 "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)"],
 }]
 },
 opcijas:{
 leģenda: {displejs: patiess}, //Pēc noklusējuma tā ir patiesa.
}
});

Izvade:

Tāpat kā iepriekš minētajos piemēros, varat izmēģināt citas diagrammas, mainot veids.

Tomēr šeit ir atbalstīto saraksts diagramma.js diagrammu veidus, kurus varat izmēģināt, izmantojot iepriekš minētos kodēšanas noteikumus:

• bārs
• līnija
• izkaisīt
• virtulis
• pīrāgs
• radars
• polārais apgabals
• burbulis

Spēlējiet ar Chart.js

Lai gan šajā apmācībā esat apguvis tikai līniju, sektoru un joslu diagrammas, koda shēma citu diagrammu zīmēšanai ar chart.js ir tāda pati. Tāpēc jūtieties brīvi spēlēties arī ar citiem.

Ņemot to vērā, ja vēlaties vairāk nekā tas, ko piedāvā chart.js, iespējams, vēlēsities apskatīt arī dažas citas JavaScript diagrammu bibliotēkas.

6 JavaScript ietvari, kurus ir vērts apgūt

Ir daudz JavaScript ietvaru, kas palīdz izstrādē. Šeit ir daži, kas jums jāzina.

Lasiet Tālāk

Par autoru