On olemassa muutamia JavaScript-kirjastoja erilaisten kaavioiden piirtämiseen pylväskaavioista viivakaavioihin ja muihin. Jos opettelet näyttämään tietoja dynaamisesti verkkosivustollasi JavaScriptin avulla, Chart.js on yksi tällainen kirjasto, jota sinun kannattaa kokeilla.

Kuinka voit aloittaa datavisualisaatioiden luomisen Chart.js: n avulla? Opit kuinka tässä artikkelissa.

Aloitetaan.

Mikä on Chart.js?

Chart.js on avoimen lähdekoodin datavisualisoinnin JavaScript-kirjasto, jota käytetään piirtämään HTML-muodossa olevia kaavioita. Se tukee tällä hetkellä kahdeksaa erilaista interaktiivista kaaviotyyppiä, joita voit myös animoida. Jotta voit luoda HTML-pohjaisen kaavion chart.js: n avulla, tarvitset HTML-pohjan sen säilyttämiseen.

Kirjasto hyväksyy joukon tietojoukkoja ja muita mukautusparametreja, kuten taustavärin, reunuksen värin ja paljon muuta. Yksi tietojoukoista on etiketti, joka edustaa X-akselin arvoja. Toinen on joukko numeerisia arvoja, jotka tyypillisesti sijaitsevat Y-akselilla.

Sinun on myös määritettävä kaavion tyyppi kaavioobjektissa, jotta kirjasto tietää, mikä kuvaaja piirtää.

Kaavioiden luominen Chart.js: n avulla

Kuten aiemmin mainitsimme, voit luoda erityyppisiä kaavioita chart.js. Tässä opetusohjelmassa aloitat viiva- ja pylväskaavioilla. Kun ymmärrät näiden taustalla olevan konseptin, sinulla on kaikki työkalut ja luottamus muiden käytettävissä olevien kaavioiden piirtämiseen.

Aiheeseen liittyvä:Kuinka tehdä sivustostasi reagoiva ja interaktiivinen CSS: n ja JavaScriptin avulla

Aloittaaksesi käytön chart.js, luo tarvittavat tiedostot. Tässä opetusohjelmassa tiedostojen nimet ovat chart.html, plot.js, ja index.css. Voit käyttää tiedostoillesi mitä tahansa nimeämiskäytäntöä.

Liitä nyt seuraavat tiedot pää HTML-tiedostosi osasta linkittääksesi Chart.js-sisällönjakeluverkkoon (CDN).

Sisään chart.html:

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

Luo seuraavaksi HTML-kanvas kaavion säilyttämiseksi ja anna sille ID. Muodosta myös yhteys CSS-tiedostoon (index.css). pää -osio ja osoita JavaScript-tiedostoasi (plot.js) kehon -osio.

HTML-tiedoston rakenne näyttää tältä:

 Kaaviot

Ja sinun CSS:

body{
 taustaväri:#383735;
}
h1{
 väri:#e9f0e9;
 marginaali vasen: 43 %;
}
#plots{
 marginaali: auto;
 taustaväri: #2e2d2d;
}

Yllä oleva CSS-tyyli ei ole vakiokäytäntö. Joten voit muotoilla omasi haluamallasi tavalla DOM-rakenteesta riippuen. Kun HTML- ja CSS-tiedostosi ovat valmiit, on aika piirtää kaaviot JavaScriptillä.

Viivakaavio

Voit tehdä viivakaavion kanssa chart.js, asetat kaavion tyyppi kohtaan linja. Tämä käskee kirjastoa piirtämään viivakaavion.

Osoita tämä JavaScript-tiedostossasi seuraavasti:

// Hanki HTML-kanvas sen tunnuksella
plots = document.getElementById("plots");
// Esimerkkitietojoukot X- ja Y-akseleille
var months = ["Tam", "helmikuu", "maaliskuu", "huhtikuu", "toukokuu", "kesäkuu", "heinäkuu"]; //Pysyy X-akselilla
var liikenne = [65, 59, 80, 81, 56, 55, 60] //Pysyy Y-akselilla
// Luo Chart-objektin esiintymä:
uusi kaavio (plots, {
 tyyppi: 'line', //Ilmoita kaavion tyyppi
 tiedot: {
 etiketit: kuukautta, //X-akselin tiedot
 tietojoukot: [{
 tiedot: liikenne, //Y-akselin tiedot
 backgroundColor: '#5e440f',
 borderColor: 'valkoinen',
 täyttö: väärä, //Täyttää viivan alla olevan käyrän taustavärillä. Se on oletuksena totta
 }]
 },
});

Lähtö:

Voit vapaasti vaihtaa täyttää arvoa totta, käytä enemmän tietoja tai säädä värejä nähdäksesi mitä tapahtuu.

Kuten myös näet, kaavion yläosassa on pieni legendaarinen laatikko. Voit poistaa sen valinnaisen sisällä vaihtoehtoja parametri.

The vaihtoehtoja parametri auttaa myös muissa muokkauksissa selitteen poistamisen tai sisällyttämisen lisäksi. Voit käyttää sitä esimerkiksi pakottamaan akselin aloittamaan nollasta.

Ilmoittaaksesi an vaihtoehtoja parametri, tältä kaavioosio näyttää JavaScript-tiedostossasi:

// Luo kaavioobjektin esiintymä:
uusi kaavio (plots, {
 tyyppi: 'line', //Ilmoita kaavion tyyppi
 tiedot: {
 etiketit: kuukautta, //X-akselin tiedot
 tietojoukot: [{
 tiedot: liikenne, //Y-akselin tiedot
 backgroundColor: '#5e440f', //Pisteiden väri
 borderColor: 'valkoinen', //Viivan väri
 täyttö: väärä, //Täyttää viivan alla olevan käyrän taustavärillä. Se on oletuksena totta
 }]
 },
 //Määritä mukautetut asetukset:
 vaihtoehdot:{
 selite: {näyttö: false}, //Poista seliteruutu asettamalla se arvoon false. Se on oletuksena totta.
//Määritä vaakojen asetukset. Esimerkiksi saada Y-akseli alkamaan nollasta:
 asteikot:{
 yAkselit: [{rastit: {min: 0}}] //Voit toistaa saman X-akselille, jos se sisältää kokonaislukuja.
 }
 } 
});

Lähtö:

Voit myös käyttää eri taustavärejä jokaiselle pisteelle. Taustavärien muuttaminen tällä tavalla on kuitenkin yleensä hyödyllisempää pylväskaavioiden kanssa.

Pylväskaavioiden tekeminen Chart.js: n avulla

Tässä sinun tarvitsee vain muuttaa kaaviota tyyppi kohtaan baari. Sinun ei tarvitse asettaa täyttää vaihtoehto, koska palkit perivät taustavärin automaattisesti:

// Luo Chart-objektin esiintymä:
uusi kaavio (plots, {
 tyyppi: "baari", //Ilmoita kaavion tyyppi
 tiedot: {
 etiketit: kuukautta, //X-akselin tiedot
 tietojoukot: [{
 tiedot: liikenne, //Y-akselin tiedot
 backgroundColor: '#3bf70c', //Palkojen väri
 }]
 },
 vaihtoehdot:{
 selite: {näyttö: false}, //Poista seliteruutu asettamalla se arvoon false. Se on oletuksena totta.
 }
});

Lähtö:

Voit vapaasti pakottaa Y-akselin aloittamaan nollasta tai mistä tahansa arvosta, kuten teit viivakaaviossa.

Aiheeseen liittyvä:JavaScript-taulukkomenetelmät, jotka sinun tulee hallita

Jos haluat käyttää eri värejä kussakin palkissa, siirrä joukko värejä, jotka vastaavat tietojesi kohteiden määrää taustaväri parametri:

// Luo Chart-objektin esiintymä:
uusi kaavio (plots, {
 tyyppi: "baari", //Ilmoita kaavion tyyppi
 tiedot: {
 etiketit: kuukautta, //X-akselin tiedot
 tietojoukot: [{
 tiedot: liikenne, //Y-akselin tiedot
//Jokaisen palkin väri:
 taustaväri: [
 "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)"],
 }]
 },
 vaihtoehdot:{
 selite: {näyttö: false}, //Poista seliteruutu asettamalla se arvoon false. Se on oletuksena totta.
 }
});

Lähtö:

Ympyräkaavion tekeminen Chart.js: n avulla

Voit piirtää ympyräkaavion muuttamalla kaavion tyypiksi piirakka. Haluat ehkä myös asettaa selitteen näytön tilaan totta nähdäksesi, mitä kukin piirakan osa edustaa:

// Luo kaavioobjektin esiintymä:
uusi kaavio (plots, {
 type: 'pie', //Ilmoita kaavion tyyppi
 tiedot: {
 otsikot: kuukautta, //Määrittää kunkin segmentin
 tietojoukot: [{
 data: liikenne, //Määrittää segmentin koon
 //Jokaisen segmentin väri
 taustaväri: [
 "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)"],
 }]
 },
 vaihtoehdot:{
 selite: {display: true}, //Tämä on oletuksena tosi.
}
});

Lähtö:

Kuten yllä olevissa esimerkeissä teit, voit kokeilla muita kaavioita muuttamalla tyyppi.

Tästä huolimatta tässä on luettelo tuetuista chart.js kaaviotyyppejä, joita voit kokeilla käyttämällä yllä olevia koodauskäytäntöjä:

• baari
• linja
• hajaantua
• donitsi
• piirakka
• tutka
• napa-alue
• kupla

Pelaa Chart.js: n kanssa

Vaikka olet saanut käsiisi vain viiva-, ympyrä- ja pylväskaaviot tässä opetusohjelmassa, koodimalli muiden kaavioiden piirtämiseen chart.js: lla noudattaa samaa käytäntöä. Joten voit vapaasti leikkiä myös muiden kanssa.

Tästä huolimatta, jos haluat enemmän kuin mitä chart.js tarjoaa, sinun kannattaa katsoa myös joitain muita JavaScript-kaaviokirjastoja.

6 oppimisen arvoista JavaScript-kehystä

Siellä on monia JavaScript-kehyksiä, jotka auttavat kehitystä. Tässä on joitain, jotka sinun pitäisi tietää.

Lue Seuraava

Kirjailijasta