Erinevate diagrammide joonistamiseks on üsna vähe JavaScripti teeke, alates tulpdiagrammist kuni joondiagrammideni ja palju muud. Kui õpite oma veebisaidil JavaScripti abil dünaamiliselt andmeid kuvama, on Chart.js üks selline teek, mida peaksite proovima.

Kuidas alustada andmete visualiseerimiste loomist rakendusega Chart.js? Sellest artiklist saate teada, kuidas.

Alustame.

Mis on Chart.js?

Chart.js on avatud lähtekoodiga andmete visualiseerimise JavaScripti teek, mida kasutatakse HTML-i abil renderdatavate diagrammide joonistamiseks. Praegu toetab see kaheksat erinevat interaktiivse diagrammi tüüpi, mida saate ka animeerida. Chart.js-iga HTML-põhise graafiku loomiseks vajate selle hoidmiseks HTML-lõuendit.

Teek aktsepteerib andmekogumite komplekti ja muid kohandamisparameetreid, nagu taustavärv, äärise värv ja palju muud. Üks andmekogumitest on silt, mis tähistab väärtusi X-teljel. Teine on arvväärtuste komplekt, mis tavaliselt asuvad Y-teljel.

Samuti peate diagrammiobjektis määrama graafiku tüübi, et teek teaks, millist graafikut joonistada.

Diagrammide loomine rakendusega Chart.js

Nagu varem mainisime, saate selle abil luua erinevat tüüpi diagramme chart.js. Selle õpetuse jaoks alustate joon- ja tulpdiagrammidega. Kui olete nende kontseptsioonist aru saanud, on teil kõik tööriistad ja enesekindlus, mida vajate teiste saadaolevate diagrammide joonistamiseks.

Seotud:Kuidas muuta oma veebisait CSS-i ja JavaScripti abil tundlikuks ja interaktiivseks

Kasutamise alustamiseks chart.js, looge vajalikud failid. Selle õpetuse jaoks on failinimed chart.html, plot.js, ja index.css. Saate oma failide jaoks kasutada mis tahes nimetamistavasid.

Nüüd kleepige järgmine pea HTML-faili jaotisesse Chart.js sisuedastusvõrgu (CDN) linkimiseks.

sisse chart.html:

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

Järgmisena looge diagrammi hoidmiseks HTML-lõuend ja andke sellele ID. Samuti looge ühendus CSS-failiga (index.css). pea jaotises ja osutage oma JavaScripti (plot.js) failile keha osa.

HTML-faili struktuur näeb välja selline:

 Diagrammid

Ja sinus CSS:

keha{
 background-color:#383735;
}
h1{
 värv:#e9f0e9;
 marginaal-vasak: 43%;
}
#plots{
 veeris: auto;
 taustavärv: #2e2d2d;
}

Ülaltoodud CSS-stiil ei ole kindel tava. Nii et saate oma DOM-i struktuurist olenevalt kujundada endale meelepäraseks. Kui teie HTML- ja CSS-failid on valmis, on aeg joonistada oma diagrammid JavaScriptiga.

Joonediagramm

Joonediagrammi koostamiseks chart.js, määrate diagrammi tüüp juurde rida. See käsib raamatukogul joonistada joondiagrammi.

Selle demonstreerimiseks tehke oma JavaScripti failis järgmist.

// Hankige HTML-lõuend selle ID järgi
plots = document.getElementById("plots");
// Näidisandmed X- ja Y-telgede jaoks
var months = ["jaan", "veebruar", "märts", "aprill", "mai", "juuni", "juuli"]; //Jääb X-teljele
vari liiklus = [65, 59, 80, 81, 56, 55, 60] //Jääb Y-teljele
// Looge diagrammi objekti eksemplar:
uus diagramm (diagrammid, {
 tüüp: 'rida', //Deklareerige diagrammi tüüp
 andmed: {
 sildid: kuud, //X-telje andmed
 andmestikud: [{
 andmed: liiklus, //Y-telje andmed
 taustavärv: '#5e440f',
 piirivärv: "valge",
 täitmine: vale, //Täidab joone all oleva kõvera taustavärviga. See on vaikimisi tõsi
 }]
 },
});

Väljund:

Muutke julgelt täita väärtust tõsi, kasutage rohkem andmeid või muutke värve, et näha, mis juhtub.

Nagu näete, on diagrammi ülaosas väike legendi kast. Saate selle valikulise seest eemaldada valikuid parameeter.

The valikuid parameeter aitab peale legendi eemaldamise või kaasamise ka muude kohanduste tegemisel. Näiteks saate seda kasutada telje sundimiseks alustama nullist.

Et kuulutada an valikuid parameetrit, näeb diagrammi jaotis teie JavaScripti failis välja järgmiselt:

// Looge diagrammi objekti eksemplar:
uus diagramm (diagrammid, {
 tüüp: 'rida', //Deklareerige diagrammi tüüp
 andmed: {
 sildid: kuud, //X-telje andmed
 andmestikud: [{
 andmed: liiklus, //Y-telje andmed
 taustavärv: '#5e440f', //Punktide värv
 piirivärv: "valge", //Jooni värv
 täitmine: vale, //Täidab joone all oleva kõvera taustavärviga. See on vaikimisi tõsi
 }]
 },
 //Määrake kohandatud valikud:
 valikud:{
 legend: {kuva: vale}, //Eemaldage legendi kast, määrates selle väärtuseks false. See on vaikimisi tõsi.
//Määrake kaalude seaded. Näiteks selleks, et Y-telg algaks nullist:
 kaalud:{
 yAxes: [{tiks: {min: 0}}] //Saate korrata sama X-telje puhul, kui see sisaldab täisarve.
 }
 } 
});

Väljund:

Samuti saate iga punkti jaoks kasutada erinevaid taustavärve. Taustavärvide niisugune muutmine on tavaliselt tulpdiagrammide puhul kasulikum.

Tulpgraafikute tegemine Chart.js-iga

Siin peate muutma ainult diagrammi tüüp juurde baar. Te ei pea määrama täita valik, kuna ribad pärivad taustavärvi automaatselt:

// Looge diagrammi objekti eksemplar:
uus diagramm (diagrammid, {
 tüüp: "baar", //Deklareerige diagrammi tüüp
 andmed: {
 sildid: kuud, //X-telje andmed
 andmestikud: [{
 andmed: liiklus, //Y-telje andmed
 backgroundColor: '#3bf70c', //Ballide värv
 }]
 },
 valikud:{
 legend: {kuva: vale}, //Eemaldage legendi kast, määrates selle väärtuseks false. See on vaikimisi tõsi.
 }
});

Väljund:

Võite vabalt Y-telje sundida alustama nullist või mis tahes väärtusest, nagu tegite joondiagrammi puhul.

Seotud:JavaScripti massiivi meetodid, mida peaksite valdama

Iga riba jaoks erinevate värvide kasutamiseks edastage andmetes olevate üksuste arvule vastavad värvid taustavärv parameeter:

// Looge diagrammi objekti eksemplar:
uus diagramm (diagrammid, {
 tüüp: "baar", //Deklareerige diagrammi tüüp
 andmed: {
 sildid: kuud, //X-telje andmed
 andmestikud: [{
 andmed: liiklus, //Y-telje andmed
//Iga riba värv:
 taustavärv: [
 "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)"],
 }]
 },
 valikud:{
 legend: {kuva: vale}, //Eemaldage legendi kast, määrates selle väärtuseks false. See on vaikimisi tõsi.
 }
});

Väljund:

Sektordiagrammi koostamine rakendusega Chart.js

Sektordiagrammi joonistamiseks muutke diagrammi tüübiks pirukas. Võib-olla soovite määrata ka legendi kuva tõsi et näha, mida iga piruka osa esindab:

// Looge diagrammi objekti eksemplar:
uus diagramm (diagrammid, {
 type: 'pie', //Deklareerige diagrammi tüüp
 andmed: {
 sildid: kuud, //Määrab iga segmendi
 andmestikud: [{
 andmed: liiklus, //Määrab segmendi suuruse
 //Iga segmendi värv
 taustavärv: [
 "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)"],
 }]
 },
 valikud:{
 legend: {display: true}, //See on vaikimisi tõene.
}
});

Väljund:

Nagu ülaltoodud näidetes, saate proovida teisi diagramme, muutes tüüp.

Sellegipoolest on siin toetatud loend chart.js diagrammitüüpe, mida saate proovida ülaltoodud kodeerimismeetodite abil:

• baar
• rida
• hajutada
• sõõrik
• pirukas
• radar
• polaarala
• mull

Mängige rakendusega Chart.js

Ehkki selles õpetuses on teil käed külge pandud vaid joon-, sektor- ja tulpdiagrammidele, järgib koodimuster teiste diagrammide diagrammiga chart.js-iga sama põhimõtet. Nii et võite vabalt ka teistega mängida.

Seda arvestades, kui soovite rohkem kui see, mida chart.js pakub, võiksite heita pilgu ka mõnele teisele JavaScripti diagrammiteegile.

6 JavaScripti raamistikku, mida tasub õppida

Seal on palju JavaScripti raamistikke, mis aitavad arendada. Siin on mõned, mida peaksite teadma.

Loe edasi

Autori kohta