Noțiuni de bază cu Chart.js Introducere

În mod normal, oamenii nu doresc să treacă printr-o cantitate mare de date care le sunt prezentate sub formă de text sau de tabele. De cele mai multe ori acest lucru se datorează faptului că este plictisitor, dar mai important, este mult mai greu să procesăm numerele brute. 

De exemplu, aici este un tabel al celor zece cele mai populate țări din lume:

Cu doar zece țări în acest tabel, există încă o șansă foarte bună ca dumneavoastră și ceilalți cititori să treceți complet masa. În mod normal, oamenii se uită numai la una sau două țări care le interesează. Dacă aceleași date ar fi fost prezentate sub forma unei bare de bare, ar fi fost nevoie de foarte puțin timp ca cineva să obțină o idee grosolană despre populația din aceste țări. 

În plus, va fi mult mai ușor să dai seama de tendințe sau de fapte - de exemplu, Statele Unite sunt de două ori mai populate decât Bangladeshul, iar China are aproximativ zece ori mai mulți oameni decât Rusia - doar căutând lungimea barelor din diagramă.

O bibliotecă populară pe care o puteți utiliza pentru a crea diferite tipuri de diagrame este Chart.js. În această serie veți învăța despre toate aspectele importante ale acestei biblioteci. Acesta poate fi folosit pentru a crea grafice fanteziste, receptive pe HTML5 Canvas. 

Biblioteca vă permite să amestecați diferite tipuri de diagrame și să compilați datele cu ușurință la datele date, la logaritmice sau la scale personalizate. Biblioteca include, de asemenea, animații în afara casetei, care pot fi aplicate la schimbarea datelor sau la actualizarea culorilor. 

Să începem cu instalarea și apoi vom trece la opțiunile de configurare și alte aspecte.

Instalare și utilizare

Puteți descărca cea mai recentă versiune a Chart.js de la GitHub sau puteți folosi linkul CDN pentru al include în proiectele dvs. De asemenea, puteți instala biblioteca utilizând NPM sau umbrar cu ajutorul următoarelor comenzi:

npm instalare diagram.js - salvați bower install chart.js --save

Biblioteca are două versiuni diferite. Versiunea normală, numită Chart.js și Chart.min.js, vine cu biblioteca Chart.js și un parser de culoare. Dacă doriți să utilizați această versiune a bibliotecii și decideți să utilizați axa temporală în tabelele dvs., va trebui să includeți separat biblioteca Moment.js înainte de a utiliza Chart.js. 

Versiunea inclusă, care este identificată ca Chart.bundle.js  sau Chart.bundle.min.js, include deja Moment.js. În acest fel, nu va fi necesar să includeți două fișiere separate. Un lucru pe care trebuie să-l aveți în vedere nu este să utilizați această versiune dacă ați inclus deja Moment.js în proiectul dvs. Acest lucru poate duce la probleme de versiune.

Odată ce ați dat seama la versiunea bibliotecii pe care doriți să o utilizați, o puteți include în proiectele dvs. și puteți începe să creați diagrame minunate.

Crearea unei diagrame

Să reprezentăm tabelul de populație prezentat în introducere ca o diagramă de bare. Axa y va fi folosită pentru a compila populația, iar axa x va fi utilizată pentru a complota țările. Începem prin a crea o pânză cu id popChart.

Lățimea și înălțimea sunt folosite pentru a determina dimensiunile graficului. Când se creează diagrame receptive, raportul de aspect al diagramei este determinat de lățimea și înălțimea panzei.

Apoi, trebuie să instanțiați Diagramă clasă. Acest lucru se poate face prin trecerea nodului, a instanței jQuery sau a contextului 2d al pânzei pe care doriți să desenați diagrama.

var popCanvas = $ ("# popChart"); var popCanvas = document.getElementById ("popChart"); var popCanvas = document.getElementById ("popChart"); getContext ("2d");

Singurul lucru pe care trebuie să-l faceți este să transmiteți toți parametrii constructorului:

var barChart = diagramă nouă (popCanvas, tip: 'bar', date: etichete: ["China", "India", "Statele Unite", "Indonezia", ​​"Brazilia", "Pakistan", "Nigeria"; "Bangladesh", "Rusia", "Japonia"], seturi de date: [etichetă: "Populație", date: [1379302771, 1281935911, 326625791, 260580739,207353391,204924861,120632261,157826578,142257519,126451398] 'rgba (255, 99, 132, 0.6)', 'rgba (54, 162, 235, 0.6) ',' rgba (153, 102, 255, 0.6) ',' rgba (255, 159, 64, 0.6) 0.6), "rgba (255, 206, 86, 0.6)", "rgba (75, 192, 192, 0.6)", rgba (153, 102, 255, 0.6);

Obiectul trecut în al doilea parametru conține toate informațiile pe care Chart.js trebuie să le elaboreze. tip cheia este utilizată pentru a specifica tipul de diagramă pe care doriți să o desenați. Poate avea oricare din următoarele valori: linia, bar, radar, polarArea, plăcintă, gogoașă, și balon. Veți învăța despre toate aceste tipuri de diagrame din această serie.

Tasta de date conține datele reale pe care doriți să le compilați. culoare de fundal cheia este utilizată pentru a specifica culoarea diferitelor bare din diagramă. Când culoarea de fundal nu este specificată, valoarea implicită 'RGBA (0,0,0,0.1)' este folosit. 

Fiecare dintre diagrame are, de asemenea, propriile chei specifice pe care le puteți utiliza pentru a controla aspectul acestuia. Iată graficul creat de codul de mai sus:

În demo-ul de mai sus, puteți trece peste baruri pentru a vedea populația exactă din diferite țări. Un lucru mai remarcabil este că dimensiunea graficului nu este egală cu dimensiunile pe care le-am specificat, dar are încă același aspect de aspect. 

Dacă doriți ca diagramele să aibă aceleași dimensiuni pe toate dispozitivele, va trebui să setați valoarea sensibil cheia pentru fals.

Opțiuni de configurare

Biblioteca Chart.js vă oferă posibilitatea de a personaliza toate aspectele hărților pe care le creați. De exemplu, puteți schimba culoarea și lățimea marginilor barelor din graficul de mai sus. De asemenea, puteți modifica sfaturile și legenda, schimbând dimensiunea și culoarea fontului. În această secțiune, veți afla despre diferite chei care sunt utilizate pentru a modela aceste elemente.

Biblioteca are patru chei globale speciale care pot fi folosite pentru a schimba toate fonturile într-o diagramă. Aceste chei sunt defaultFontFamily, defaultFontSize, defaultFontStyle, și defaultFontColor. Dimensiunea fontului este specificată în pixeli și nu se aplică radialLinear etichete punct de scară. asemănător, defaultFontStyle nu se aplică titlului sau subsolului instrumentului.

Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = 'albastru';

Următoarea diagramă utilizează setările globale de fonturi de mai sus. Modificarea aspectului în acest fel vă poate ajuta să creați diagrame care se potrivesc cu stilul dvs. web.

De asemenea, puteți modifica legenda care apare într-o diagramă. Opțiunile de configurare trebuie să fie transmise în options.legend Spațiu de nume. De asemenea, puteți specifica opțiunile de legendă la nivel global pentru toate graficele care utilizează Chart.defaults.global.legend. Poziția legendei este controlată folosind poziţie cheie, care poate accepta una din următoarele patru valori: top, stânga, fund, și dreapta. De asemenea, puteți afișa sau ascunde legenda folosind afişa cheie.

Pe lângă legendă, puteți controla și aspectul etichetei legendei. Opțiunile de configurare ale acestuia sunt setate sub configurația legendelor utilizând eticheta cheie. Lățimea casetei de culoare poate fi specificată utilizând boxWidth cheie. Când nu este specificată nicio valoare, se folosește valoarea implicită 40. 

Familia de fonturi, dimensiunea fontului, culoarea fontului și valorile stilului de font sunt moștenite din configurația globală în mod implicit. Cu toate acestea, puteți specifica propriile valori pentru utilizarea acestora marimea fontului, stilul fontului, familie de fonturi, și fONTCOLOR.

var barChart = noua diagramă (popCanvas, type: 'bar', date: date, opțiuni: legend: display: true, position: 'bottom', etichete: boxWidth: 80, fontColor: 'rgb , 100) ');

Puteți controla modul în care instrumentele sunt desenate local pentru o diagramă utilizând options.tooltips Spațiu de nume. asemănător, Chart.defaults.global.tooltips poate fi folosit pentru a seta aspectul de sculpturi la nivel global. Pentru a specifica dacă instrumentele trebuie prezentate utilizatorului, puteți folosi activat cheie. Setarea la fals va dezactiva vârfurile de instrumente. Valoarea implicită a acestei chei este Adevărat. 

De asemenea, puteți controla comportamentul de afișare / ascundere a instrucțiunilor utilizând butonul intersecta cheie. Când este setat la Adevărat, care este, de asemenea, valoarea implicită a acestei chei, instrucțiunile sunt afișate numai atunci când indicatorul mouse-ului interacționează cu barele. Când este setat la fals, instrucțiunile sunt afișate pe baza comportamentului specificat de mod cheie. 

mod cheia este utilizată pentru a determina ce element este prezentat în tooltip. Valoarea implicită este cel mai apropiat. Acest lucru înseamnă că atunci când ați setat intersecta la fals, se va afișa simbolul pentru bara cea mai apropiată de cursorul mouse-ului.

La fel ca și legenda, puteți de asemenea să controlați valoarea diferitelor proprietăți bazate pe fonturi pentru sfaturi. Singura diferență este că de această dată valorile vor trebui să fie stabilite individual pentru elementele de titlu, corp și subsol ale sfatului de instrument. 

De exemplu, puteți schimba proprietățile fontului corpului din tooltip folosind bodyFontFamily, bodyFontSize, bodyFontStyle, și bodyFontColor. Titlul și subsolul tooltip-ului au și alte proprietăți numite titleMarginBottom și footerMarginTop. Ele pot fi folosite pentru a adăuga un spațiu suplimentar între ele și corpul instrumentului. 

În mod similar, puteți adăuga elemente de umplutură suplimentare în partea stângă / dreapta și partea superioară / inferioară a sfatului de instrument, utilizând xPadding și yPadding proprietăţi.

Aveți posibilitatea să controlați mărimea săgeții degetului folosind butonul caretSize cheie. Fundalul vârfurilor de instrumente poate fi modificat utilizând culoare de fundal cheie.

var barChart = noua diagramă (popCanvas, type: 'bar', date: date, opțiuni: tooltips: cornerRadius: 0, caretSize: 0, xPadding: 16, yPadding: 100, 0.9) ', titleFontStyle:' normal ', titleMarginBottom: 15);

Opțiunile de mai sus vor ascunde cartea ca caretSize este setat la 0. Iată un demo de lucru care arată opțiunile în acțiune. Încercați să treceți deasupra barelor pentru a vedea sfaturile personalizate.

Gândurile finale

Acest tutorial a oferit o introducere de bază a bibliotecii Chart.js și ți-a arătat cum să-l folosești pentru a crea grafice de bare. De asemenea, ați învățat despre diferite opțiuni de configurare care pot fi utilizate pentru a controla apariția diferitelor diagrame. 

Deși am folosit barele de bare numai în tutorial, opțiunile de configurare ar putea fi aplicate tuturor tipurilor de diagrame. În următorul tutorial, veți afla mai multe detalii despre diagramele și barele de bare.

JavaScript a devenit una dintre limbile de facto de lucru pe web. Nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.

Dacă aveți întrebări despre acest tutorial, anunțați-ne în comentarii.

Rețineți că datele despre populație au fost preluate din aceste informații de recensământ.