Share
Ați învățat despre patru tipuri diferite de diagrame în Chart.js până la acest punct. Al doilea tutorial al seriei a acoperit linii și grafice. Cel de-al treilea tutorial a discutat graficele radar și zona polară. În acest tutorial, veți învăța cum să utilizați Chart.js pentru a crea diagrame plăcintă, gogoși și bule.
Diagramele plăcilor și gogoșilor sunt utile atunci când doriți să arătați proporția în care ceva este împărțit între diferite entități. De exemplu, puteți utiliza diagrame pentru a arăta procentul de bărbați, femei și tineri de lei în cadrul unui parc sălbatic sau procentajul de voturi pe care diferiți candidați l-au obținut în alegeri.
Diagramele de diagrame sunt utile doar atunci când doriți să comparați un anumit parametru sau set de date. Un lucru important care trebuie păstrat în minte este că nu puteți folosi diagramele pentru a compune entități ale căror valori sunt zero deoarece unghiul sectoarelor dintr-o diagramă de tip pieptene depinde de magnitudinea punctelor de date.
Aceasta înseamnă că orice entitate a cărei cotă este zero nu va fi afișată deloc pe diagramă. În mod similar, nu puteți compila valori negative pe o diagramă de tip pieptene. Aveți posibilitatea să creați diagrame în Chart.js prin setarea tip cheia pentru plăcintă. În mod similar, puteți crea diagrame gogoși prin setarea tip cheia pentru gogoașă. Iată un exemplu de creare a acestor două diagrame:
var pieChart = diagramă nouă (voturiCanvas, tip: "plăcintă", date: votesData, opțiuni: chartOptions); var doughnutChart = diagramă nouă (voturiCanvas, tip: 'donut', date: votesData, opțiuni: chartOptions);
Să formăm o diagramă cu piepturi care să arate datele exporturilor de petrol din primele cinci țări în 2015. Datele sunt în dolari americani.
var data = etichete: ["Arabia Saudită", "Rusia", "Irak", "Emiratele Arabe Unite", "Canada"], seturi de date: [date: [133.3, 86.2, 52.2, 51.2, 50.2] : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"]];
Puteți controla aspectul diagramei de mai sus utilizând diferite taste, cum ar fi cutoutPercentage, care definește procentajul graficului care este tăiat din mijloc. De asemenea, puteți specifica unghiul de pornire al graficului folosind rotație cheie. În mod similar, puteți specifica și unghiul pe care graficul îl mută în timp ce compilează datele utilizând circumferinţă cheie.
Există două animații diferite care pot fi activate în timpul desenării unei diagrame. Puteți specifica dacă graficul ar trebui să aibă o animație de rotație utilizând animateRotate cheie. În mod similar, puteți specifica și dacă diagrama gogoșilor ar trebui să fie scalată din centru folosind animateScale cheie. Valoarea a animateRotate este setat sa Adevărat în mod prestabilit, și valoarea pentru animateScale este setat sa fals în mod implicit.
Ca de obicei, puteți controla culoarea de fundal, culoarea frontală și lățimea marginilor tuturor punctelor de date utilizând culoare de fundal, borderColor, și lățimea graniței chei, respectiv. În mod similar, valorile de hover a tuturor acestor proprietăți pot fi controlate folosind hoverBackgroundColor, hoverBorderColor, și hoverBorderWidth chei.
Iată codul pentru a crea o diagramă de gogoși pentru datele de mai sus. Setarea valorii pentru rotație egal cu -Math.PI ia acest punct de pornire cu 180 de grade în sens invers acelor de ceasornic. Apoi, setarea valorii circumferinţă la Math.PI face ca graficul să cuprindă doar un semicerc.
var dataData = etichete: ["Arabia Saudită", "Rusia", "Irak", "Emiratele Arabe Unite", "Canada"], seturi de date: [date: [133.3, 86.2, 52.2, : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"], borderColor: "negru", borderWidth: 2]; var chartOptions = rotire: -Math.PI, cutoutPercentaj: 30, circumferinta: Math.PI, legenda: position: 'left', animatie: animateRotate: false, animateScale: true;
Diagramele cu diagrame sunt folosite pentru a arăta sau afișa trei dimensiuni (p1, p2, p3) de date pe o diagramă. Poziția și dimensiunea bulelor determină valoarea acestor trei puncte de date. Axa orizontală reprezintă primul punct de date (p1), axa verticală reprezintă al doilea punct de date (p2), iar aria bulei este folosită pentru a reprezenta valoarea celui de-al treilea punct de date (p3).
Un lucru pe care ar trebui să-l țineți cont este faptul că magnitudinea celui de-al treilea punct de date nu este reprezentată de raza bulelor, ci de zona lor. Acum, zona unui cerc este proporțională cu pătratul razei. Aceasta înseamnă că trebuie să vă asigurați că raza bulei pe care o comportați este proporțională cu rădăcina pătrată a magnitudinii celui de-al treilea punct de date.
Puteți crea grafice cu bule în Chart.js prin setarea valorii tip cheia pentru balon. Iată un exemplu de creare a unei diagrame cu bule.
var bubbleChart = diagramă nouă (popCanvas, type: 'bubble', date: popData, opțiuni: chartOptions);
Să complotăm greutatea diferitelor elemente păstrate într-o cameră folosind o diagramă cu bule. Datele pentru diagramă trebuie să fie transmise sub forma unui obiect. Obiectul de date trebuie să aibă următoarea interfață pentru ca acesta să fie reprezentat corect.
X:, y: , r:
O diferență importantă între diagramele cu bule și toate celelalte diagrame este că raza bulelor nu este scalată cu graficul.
De exemplu, lățimea barelor dintr-o diagramă de bare poate crește sau scădea pe baza dimensiunii graficului. Același lucru nu se întâmplă cu hărțile cu bule. Raza bulelor este întotdeauna egală cu numărul exact de pixeli pe care l-ați specificat. Are sens, deoarece în acest tip de diagramă, raza este de fapt utilizată pentru a reprezenta date reale.
Să creați o diagramă cu bule pentru a complota populația cerbilor în diferite locuri dintr-o pădure.
var popData = seturi de date: [label: ['Deer Population'], date: [x: 100, y: 0, r: 10, x: : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25 : 5], backgroundColor: "# FF9966"];
Deoarece raza este proporțională cu rădăcina pătrată a magnitudinii actuale, numărul de cerbi la (80, 80) este de 100 de ori mai mare decât numărul de cerbi la (0, 100).
La fel ca toate celelalte tipuri de diagramă, puteți controla culoarea de fundal, culoarea frontală și lățimea marginilor punctelor planificate folosind culoare de fundal, borderColor, și lățimea graniței chei. În mod similar, puteți specifica și culoarea de fundal a hoverului, culoarea de margine a hârtiei și hărțind lățimea marginii folosind hoverBackgroundColor, hoverBorderColor, și hoverBorderWidth chei.
De asemenea, puteți specifica raza suplimentară pe care doriți să o adăugați la diferite bule pe hover utilizând hoverRadius cheie. Amintiți-vă că această rază este adăugată la valoarea inițială pentru a extrage bulele pline. Dacă balonul inițial avea o rază de 10 și hoverRadius este setat la 5, raza bulei pe hover va fi egală cu 15.
var popData = seturi de date: [label: ['Deer Population'], date: [x: 100, y: 0, r: 10, x: : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25 : 5], fundalColor: "# 9966FF", hoverBackgroundColor: "# 000000", hoverBorderColor: "# 9966FF", hoverBorderWidth: 5, hoverRadius: 5];
Parametrii de mai sus vor crea următoarea diagramă cu bule.
În acest tutorial, ați învățat despre alte trei tipuri de diagrame disponibile în Chart.js. Acum ar trebui să puteți alege tipul graficului adecvat pentru a vă compila datele și pentru a seta anumite valori pentru diferite chei pentru a le controla aspectul. În următorul tutorial, veți învăța cum să manipulați scalele pentru diferite tipuri de diagrame.
Sper că ți-a plăcut acest tutorial. Dacă aveți întrebări, vă rugăm să ne anunțați în comentarii.
Accentsconagua