Share
Tutorialul anterior al acestei serii sa concentrat pe crearea diagramelor de linii si bar folosind Chart.js. Ambele tabele au propriile utilizări și opțiuni de configurare care au fost detaliate în ultimul tutorial.
În acest tutorial, veți afla despre două noi tipuri de diagrame care pot fi create folosind diagramele Chart.js: radar și zonele polar. La fel ca tutorialul anterior, vom începe cu o scurtă trecere în revistă a tipurilor de diagrame și apoi vom trece la o discuție mai detaliată.
Diagramele și barele de bare sunt utile atunci când doriți să comparați numai una sau două proprietăți ale unui număr mare de obiecte - de exemplu, populația din toate țările din Asia sau numărul de diferiți poluanți din atmosferă.
Să presupunem că doriți să comparați densitatea, opacitatea, viscozitatea, indicele de refracție și punctul de fierbere a numai trei lichide diferite. Crearea unei diagrame pentru aceste date va fi problematică deoarece va trebui să creați cinci coloane diferite pentru fiecare lichid. De asemenea, va fi dificil să se compare proprietățile corespunzătoare ale lichidelor.
În situațiile în care trebuie să comparați o mulțime de proprietăți ale câtorva obiecte, crearea unei diagrame radar reprezintă cea mai eficientă metodă de vizualizare și comparare a datelor. Aceste grafice sunt, de asemenea, cunoscute ca diagrame de păianjen.
Din Wikipedia, o diagramă radar este o metodă grafică de afișare a datelor multivariate sub forma unei diagrame bidimensionale cu trei sau mai multe variabile cantitative reprezentate pe axe, pornind de la același punct. Pozițiile și unghiurile relative ale axelor sunt de obicei neinformative.
Să facem prima diagramă radar acum. Graficele radar sunt create prin setarea tip tastați graficele radar. Iată un exemplu foarte bun.
var radarChart = diagramă nouă (mărciCanvas, tip: 'radar', date: marksData, opțiuni: chartOptions);
Să complotăm semnele a doi elevi ai unei clase în cinci subiecte diferite. Aici este codul pentru a furniza datele pentru crearea graficului.
var markData = etichete: ["Engleză", "Matematică", "Fizică", "Chimie", "Biologie", "Istorie" 0,0,0,2) ", date: [65, 75, 70, 80, 60, 80], eticheta" Student B ", fundalColor:" rgba (0,0,200,0,2) , 65, 60, 70, 70, 75]; var radarChart = diagramă nouă (mărciCanvas, tip: 'radar', date: marksData);
Prima diagramă pe care o creăm de obicei nu are culoarea de fundal specifică de noi. Cu toate acestea, diagramele radar pot avea o mulțime de suprapuneri, ceea ce face dificilă identificarea corectă a punctelor de date fără nici o codificare a culorilor.
Din acest motiv, o culoare a fost atribuită fiecărui set de date utilizând culoare de fundal cheie. Următorul demo arată rezultatul final al codului nostru. După cum puteți vedea, acum este foarte ușor să comparăm performanțele celor doi studenți în diferite discipline.
Pe lângă culoarea de fundal, puteți schimba și culoarea de margine și lățimea marginii pentru diagramă utilizând borderColor și lățimea graniței chei. Este, de asemenea, posibil să creați margini punctate în loc de linii continue folosind borderDash cheie. Această cheie acceptă o matrice ca valoare.
Primul element al matricei determină lungimea liniilor, iar al doilea element determină spațiul dintre ele. De asemenea, puteți oferi o valoare de compensare pentru desenarea liniuțelor utilizând borderDashOffset cheie.
De asemenea, puteți controla culoarea și lățimea marginilor pentru punctele planificate utilizând pointBorderColor și pointBorderWidth. În mod similar, puteți seta și culoarea de fundal pentru diferite puncte folosind pointBackgroundColor cheie. Dimensiunea punctelor trasate poate fi specificată utilizând pointRadius cheie. Puteți controla distanța la care punctele ar trebui să înceapă să interacționeze cu mouse-ul folosind pointHitRadius cheie.
De asemenea, puteți controla aspectul punctelor planificate pe hover folosind pointHoverBackgroundColor, pointHoverBorderColor și pointHoverBorderWidth chei. Un lucru pe care trebuie să-l amintiți este că aceste chei de hover nu vor aștepta să vă plasați deasupra elementului pentru a fi declanșat. Modificările vor intra în vigoare imediat ce vă aflați în raza de lovire stabilită mai sus.
Există o mulțime de forme disponibile pentru punctele planificate. Ele sunt circulară în mod implicit. Cu toate acestea, puteți modifica forma triunghi, RECT, rectRounded, rectRot, traversa, crossRot, stea, linia, și liniuță.
Să folosim toate aceste chei pentru a reraa graficul anterior al radarului. Iată codul pentru a oferi opțiuni de configurare pentru seturile de date și scale.
var marksData = etichete: ["Engleză", "Matematică", "Fizică", "Chimie", "Biologie", "Istorie"], seturi de date: : "rgba (200,0,0,0,6)", umplere: falsă, rază: 6, punctRadius: 6, punctBondă largă: 3, punctBarcul de culoare: "portocaliu", punctBorderColor: "rgba (200,0,0,0,6)" , punctHoverRadius: 10, date: [65, 75, 70, 80, 60, 80], eticheta "Student B", fundalColor: "transparent", borderColor: "rgba (0,0,200,0,6) : fals, rază: 6, punctRadius: 6, punctBond lungime: 3, punctBarcul de culoare: "cornflowerblue", pointBorderColor: "rgba (0,0,200,0,6)", pointHoverRadius: 10, date: [54, 65, 60, 70, 70 , 75]; var chartOptions = scară: ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels: fontSize: 18, legenda: position: 'left';
În interiorul chartOptions obiect, min și max valorile sunt folosite pentru a seta valorile minime și maxime pentru scală. mărimea pasului cheia poate fi folosită pentru a indica Chart.js numărul de pași pe care ar trebui să-l urmeze min la max. Iată rezultatul final al codului de mai sus.
Graficele din zona politică sunt similare cu diagramele plăcilor. Două diferențe majore între aceste diagrame sunt cele din tabelele zonei polarizate, toate sectoarele având unghiuri egale, iar raza fiecărui sector depinde de valoarea planificată. Aceste diagrame sunt folosite pentru a descrie fenomene ciclice. De exemplu, puteți să-l utilizați pentru a calcula numărul de păsări migratoare dintr-o anumită specie în zona dvs. în fiecare anotimp al anului.
Raza fiecărui sector din aceste diagrame este proporțională cu rădăcina pătrată a numărului de obiecte corespunzătoare. În cazul păsărilor migratoare, raza va fi proporțională cu rădăcina pătrată a numărului de păsări din zona dvs..
Puteți crea grafice de zone polare în Chart.js prin setarea tip cheia pentru polarArea. Aici este codul de bază de care aveți nevoie pentru a crea o diagramă polară.
var polarAreaChart = diagramă nouă (păsăriCanvas, tip: 'polarArea', date: păsări Data, opțiuni: chartOptions);
Iată codul pentru a compila numărul de păsări migratoare pe o diagramă de zonă polară. Singurele date furnizate în acest moment sunt numărul de păsări și culoarea de fundal pentru diferite anotimpuri.
var, păsăriData = etichete: ["Spring", "Summer", "Fall", "Winter"], seturi de date: [ 0, 0,5), "rgba (100, 255, 0, 0,5)", "rgba (200, 50, 255, 0,5)", "rgba (0, 100, 255, 0,5)"]; var polarAreaChart = diagramă nouă (păsăriCanvas, tip: 'polarArea', date: păsăriData);
Codul de mai sus va crea următoarea diagramă de zonă polară.
Diagrama zonei polar oferă opțiunile obișnuite de a seta culoare de fundal, lățimea graniței, borderColor, hoverBackgroundColor, hoverBorderWidth, și hoverBorderColor. Există, de asemenea, anumite chei specifice tabelului polar pe care le puteți utiliza pentru a personaliza aspectul acestora.
De exemplu, puteți seta unghiul de pornire pentru prima valoare din setul de date utilizând startAngle cheie. În mod similar, lineArc cheie care poate fi găsită sub scară poate fi folosit pentru a specifica dacă liniile trase trebuie să fie circulare sau nu, prin stabilirea valorii sale Adevărat sau fals respectiv.
Sectoarele desenate în graficul zonei polar sunt rotite și scalate în mod implicit. Cu toate acestea, puteți preveni animația de scalare prin setarea valorii animateScale cheie pentru a falsifica. În mod similar, animația rotativă poate fi oprită prin setarea valorii animateRotate cheie pentru a falsifica. Ambele aceste taste sunt disponibile sub animaţie.
Codul de mai jos modifică valoarea câtorva taste pentru a face graficul mai atrăgător.
var, păsăriData = etichete: ["Spring", "Summer", "Fall", "Winter"], seturi de date: [ 0, 0,6), "rgba (0, 255,200, 0,6)", "rgba (200, 0, 200, 0.6)", rgba , 0, 0, 0,8) "]; var chartOptions = startAngle: -Math.PI / 4, legenda: position: 'left', animație: animateRotate: false; var polarAreaChart = diagramă nouă (păsăriCanvas, tip: 'polarArea', date: păsări Data, opțiuni: chartOptions);
Pe lângă rotirea diagramei și dezactivarea animației de rotație, am mutat și legenda din stânga graficului, setând valoarea poziţie la stânga. Acest lucru lasă suficient spațiu în partea superioară a graficului pentru ao afișa în mod corespunzător.
În acest tutorial, ați învățat despre aplicațiile radarelor și a diagramelor zonei polare. După aceea, ați învățat cum să creați diagrame de bază și să le personalizați cu diferite opțiuni de configurare disponibile în Chart.js. Veți învăța despre diagramele de plăcintă și bule în următoarea parte a seriei.
Dacă lucrați cu Web-ul, în special pe front-end, este important să știți JavaScript. Desigur, nu este fără curbele sale de învățare și există o mulțime de cadre și biblioteci care să vă țină 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 legate de acest tutorial, vă rugăm să ne anunțați în comentarii.
Accentsconagua