Yra keletas „JavaScript“ bibliotekų, skirtų įvairioms diagramoms braižyti, pradedant juostinėmis diagramomis ir baigiant linijinėmis diagramomis ir kt. Jei mokotės, kaip dinamiškai pateikti duomenis savo svetainėje naudodami „JavaScript“, Chart.js yra viena iš tokių bibliotekų, kurią turėtumėte išbandyti.

Kaip pradėti kurti duomenų vizualizacijas naudojant Chart.js? Kaip tai padaryti, sužinosite šiame straipsnyje.

Pradėkime.

Kas yra Chart.js?

Chart.js yra atvirojo kodo duomenų vizualizacijos „JavaScript“ biblioteka, naudojama HTML pateikiamoms diagramoms braižyti. Šiuo metu ji palaiko aštuonis skirtingus interaktyvių diagramų tipus, kuriuos taip pat galite animuoti. Norėdami sukurti HTML pagrįstą grafiką su chart.js, jums reikia HTML drobės, kad ji būtų laikoma.

Biblioteka priima duomenų rinkinių rinkinį ir kitus tinkinimo parametrus, tokius kaip fono spalva, kraštinės spalva ir kt. Vienas iš duomenų rinkinių yra etiketė, kuris reiškia reikšmes X ašyje. Kitas yra skaitinių reikšmių rinkinys, kuris paprastai yra Y ašyje.

Taip pat turite nurodyti grafiko tipą diagramos objekte, kad biblioteka žinotų, kurį grafiką nubraižyti.

Kaip sukurti diagramas naudojant Chart.js

Kaip minėjome anksčiau, naudodami galite kurti įvairių tipų diagramas chart.js. Šią mokymo programą pradėsite nuo linijinių ir juostinių diagramų. Suvokę jų esmę, turėsite visus įrankius ir pasitikėjimą, kurių reikia kitoms turimoms diagramoms sudaryti.

Susijęs:Kaip padaryti, kad jūsų svetainė būtų jautri ir interaktyvi naudojant CSS ir JavaScript

Norėdami pradėti naudoti chart.js, sukurkite reikiamus failus. Šioje pamokoje failų pavadinimai yra chart.html, plot.js, ir index.css. Savo failams galite naudoti bet kokią pavadinimų tvarką.

Dabar įklijuokite toliau pateiktą informaciją galva HTML failo skyrių, kad susietumėte su Chart.js turinio pristatymo tinklu (CDN).

Į chart.html:

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

Tada sukurkite HTML drobę diagramai laikyti ir suteikite jai ID. Taip pat prisijunkite prie CSS (index.css) failo galva skyrių ir nukreipkite į savo JavaScript (plot.js) failą kūnas skyrius.

HTML failo struktūra atrodo taip:

 Diagramos

Ir tavo CSS:

kūnas{
 background-color:#383735;
}
h1{
 spalva:#e9f0e9;
 marža-kairė: 43%;
}
#plots{
 paraštė: auto;
 fono spalva: #2e2d2d;
}

Aukščiau pateiktas CSS stilius nėra nustatytas susitarimas. Taigi, atsižvelgdami į DOM struktūrą, galite sukurti savo stilių, kaip norite. Kai jūsų HTML ir CSS failai bus paruošti, laikas braižyti diagramas naudojant „JavaScript“.

Linijinė diagrama

Norėdami sudaryti linijinę diagramą su chart.js, nustatysite diagramą tipo į linija. Tai nurodo bibliotekai nubrėžti linijinę diagramą.

Norėdami tai parodyti, savo „JavaScript“ faile:

// Gaukite HTML drobę pagal jos ID
plots = document.getElementById("plots");
// X ir Y ašių duomenų rinkinių pavyzdžiai
var months = ["sausis", "vasaris", "kovas", "balandis", "gegužė", "birželis", "liepa"]; //Išlieka X ašyje
var eismas = [65, 59, 80, 81, 56, 55, 60] //Išlieka Y ašyje
// Sukurkite diagramos objekto egzempliorių:
nauja diagrama (plotai, {
 tipas: 'linija', //Deklaruoti diagramos tipą
 duomenys: {
 etiketės: mėnesiai, //X ašies duomenys
 duomenų rinkiniai: [{
 duomenys: srautas, //Y ašies duomenys
 fono spalva: „#5e440f“,
 kraštinės spalva: „balta“,
 užpildyti: klaidinga, //Užpildo kreivę po linija žemos spalvos pagrindo spalva. Tai tiesa pagal nutylėjimą
 }]
 },
});

Išvestis:

Nedvejodami pakeiskite užpildyti vertė į tiesa, naudokite daugiau duomenų, pakeiskite spalvas, kad pamatytumėte, kas atsitiks.

Kaip matote, diagramos viršuje yra mažas legendų langelis. Galite jį pašalinti pasirinktinai galimybės parametras.

The galimybės parametras taip pat padeda atlikti kitus tinkinimus, ne tik pašalinant ar įtraukiant legendą. Pavyzdžiui, galite jį naudoti norėdami priversti ašį pradėti nuo nulio.

Norėdami paskelbti an galimybės parametrą, štai kaip diagramos skyrius atrodo „JavaScript“ faile:

// Sukurkite diagramos objekto egzempliorių:
nauja diagrama (plotai, {
 tipas: 'linija', //Deklaruoti diagramos tipą
 duomenys: {
 etiketės: mėnesiai, //X ašies duomenys
 duomenų rinkiniai: [{
 duomenys: srautas, //Y ašies duomenys
 fono spalva: „#5e440f“, //Taškelių spalva
 kraštinės spalva: „balta“, //Linijos spalva
 užpildyti: klaidinga, //Užpildo kreivę po linija žemos spalvos pagrindo spalva. Tai tiesa pagal nutylėjimą
 }]
 },
 //Nurodykite pasirinktines parinktis:
 galimybės:{
 legenda: {display: false}, //Pašalinkite legendos laukelį nustatydami jį į false. Tai tiesa pagal nutylėjimą.
//Nurodykite svarstyklių nustatymus. Pavyzdžiui, kad Y ašis prasidėtų nuo nulio:
 svarstyklės:{
 yAxes: [{varnele: {min: 0}}] //Galite pakartoti tą patį su X ašimi, jei joje yra sveikųjų skaičių.
 }
 } 
});

Išvestis:

Taip pat kiekvienam taškui galite naudoti skirtingas fono spalvas. Tačiau tokiu būdu keisti fono spalvas dažniausiai yra naudingiau naudojant juostines diagramas.

Juostinių diagramų kūrimas naudojant Chart.js

Čia jums tereikia pakeisti diagramą tipo į baras. Jums nereikia nustatyti užpildyti parinktis, nes juostos automatiškai paveldi fono spalvą:

// Sukurkite diagramos objekto egzempliorių:
nauja diagrama (plotai, {
 tipas: "baras", //Deklaruoti diagramos tipą
 duomenys: {
 etiketės: mėnesiai, //X ašies duomenys
 duomenų rinkiniai: [{
 duomenys: srautas, //Y ašies duomenys
 fono spalva: „#3bf70c“, //Stulpelių spalva
 }]
 },
 galimybės:{
 legenda: {display: false}, //Pašalinkite legendos laukelį nustatydami jį į false. Tai tiesa pagal nutylėjimą.
 }
});

Išvestis:

Nedvejodami priverskite Y ašį pradėti nuo nulio arba bet kokios vertės, kaip tai padarėte linijinėje diagramoje.

Susijęs:„JavaScript“ masyvo metodai, kuriuos turėtumėte įvaldyti

Norėdami naudoti skirtingas spalvas kiekvienai juostai, perduokite spalvų masyvą, atitinkantį duomenų elementų skaičių fono spalva parametras:

// Sukurkite diagramos objekto egzempliorių:
nauja diagrama (plotai, {
 tipas: "baras", //Deklaruoti diagramos tipą
 duomenys: {
 etiketės: mėnesiai, //X ašies duomenys
 duomenų rinkiniai: [{
 duomenys: srautas, //Y ašies duomenys
//Kiekvienos juostos spalva:
 fono spalva: [
 "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)"],
 }]
 },
 galimybės:{
 legenda: {display: false}, //Pašalinkite legendos laukelį nustatydami jį į false. Tai tiesa pagal nutylėjimą.
 }
});

Išvestis:

Skritulinės diagramos kūrimas naudojant Chart.js

Norėdami piešti skritulinę diagramą, pakeiskite diagramos tipą į pyragas. Taip pat galite nustatyti legendos ekraną tiesa norėdami pamatyti, ką reiškia kiekvienas pyrago segmentas:

// Sukurkite diagramos objekto egzempliorių:
nauja diagrama (plotai, {
 tipas: 'pie', //Deklaruokite diagramos tipą
 duomenys: {
 etiketės: mėnesiai, //Apibrėžia kiekvieną segmentą
 duomenų rinkiniai: [{
 duomenys: srautas, //Nustato segmento dydį
 //Kiekvieno segmento spalva
 fono spalva: [
 "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)"],
 }]
 },
 galimybės:{
 legenda: {display: true}, //Tai tiesa pagal numatytuosius nustatymus.
}
});

Išvestis:

Kaip darėte anksčiau pateiktuose pavyzdžiuose, galite išbandyti kitas diagramas pakeisdami tipo.

Nepaisant to, čia yra palaikomų sąrašas chart.js Diagramų tipus galite išbandyti naudodami aukščiau pateiktas kodavimo taisykles:

• baras
• linija
• išbarstyti
• spurga
• pyragas
• radaras
• poliarinė sritis
• burbulas

Žaisk su Chart.js

Nors šioje mokymo programoje susipažinote tik su linijinėmis, skritulinėmis ir juostinėmis diagramomis, kitų diagramų braižymo su chart.js kodo šablonas laikomasi tos pačios taisyklės. Taigi nedvejodami žaiskite ir su kitais.

Tai pasakius, jei norite daugiau nei siūlo chart.js, galbūt norėsite pažvelgti ir į kai kurias kitas „JavaScript“ diagramų bibliotekas.

6 „JavaScript“ sistemos, kurias verta išmokti

Yra daug „JavaScript“ sistemų, kurios padeda kurti. Štai keletas, kuriuos turėtumėte žinoti.

Skaitykite toliau

Apie autorių