Share
În ultimele patru tutoriale, ați învățat multe despre Chart.js. După ce ați citit primele patru tutoriale, acum ar trebui să puteți personaliza sfaturile și etichetele, să schimbați fonturile și să creați diferite tipuri de diagrame. Un aspect al Chart.js care nu a fost încă acoperit în această serie este scara.
Cântăriile s-au schimbat mult de la versiunea v1.0 a bibliotecii și sunt acum mult mai puternice. În acest tutorial, veți învăța cum să manipulați scalele și să le controlați aspectul utilizând diferite opțiuni pe care le oferă biblioteca.
Toate opțiunile de configurare pentru liniile de rețea sunt imbricate sub opțiunea de scală din GridLines cheie. Această cheie definește opțiunile pentru personalizarea liniilor de rețea care rulează perpendicular pe axe. Să modificăm liniile de grilă ale graficului de linie pe care l-ați creat în tutorialul de linii și grafice.
Puteți afișa sau ascunde liniile de rețea ale unei diagrame utilizând butonul afişa cheie. Valoarea sa inițială este Adevărat, astfel că liniile de rețea sunt afișate în mod prestabilit. Culoarea liniilor de rețea poate fi specificată prin utilizarea funcției culoare cheie. Dacă doriți ca liniile de rețea să fie compuse din liniuțe în loc să fie linii solide, puteți oferi o valoare pentru lungimea și spațierea liniilor ca valoare a borderDash cheie. Puteți seta lățimea și culoarea liniilor pentru primul indice sau zero folosind zeroLineWidth și zeroLineColor chei, respectiv.
În toate hărțile până în acest punct, scalele nu aveau niciun text descriptiv care să permită telespectatorilor să știe ce reprezentau o anumită axă. Acest lucru poate face ca graficele să fie mai puțin utile. De exemplu, dacă vedeți un grafic al vitezei mașinii și nu puteți să dați seama de unitatea în care viteza este reprezentată grafic pe axa y, graficul este aproape inutil.
Puteți afișa sau ascunde etichetele de scală de pe o diagramă utilizând butonul afişa cheie. Etichetele scării sunt ascunse în mod implicit. Textul care ar trebui afișat pe aceste scale poate fi specificat folosind labelString cheie. De asemenea, puteți controla culoarea, familia, dimensiunea și stilul fontului folosind fONTCOLOR, familie de fonturi, marimea fontului, și stilul fontului chei, respectiv.
Aici este aceeași diagramă de viteză veche cu un set diferit de opțiuni grafice specificate.
var chartOptions = legend: display: true, position: 'top', etichete: boxWidth: 80, fontColor: 'negru', scări: xAxes: [gridLines: display: false; ", dimensiuneLabel: display: true, labelString:" Timp în secunde ", fontColor:" roșu "], yAxes: [gridLines: color: scaleLabel: display: true, labelString: "Viteza în mile pe oră", fontColor: "verde"];
Există încă o chei numită offsetGridLines. Când este setat la Adevărat, acesta schimbă etichetele în mijlocul liniilor de rețea. Acest lucru este, în general, util atunci când se creează bare grafice.
Balanțele liniare sunt utilizate pentru a înregistra date numerice. Aceste scale pot fi create pe axa x sau y. În majoritatea cazurilor, Chart.js detectează automat valorile minime și maxime pentru scale. Cu toate acestea, acest lucru poate duce la o anumită confuzie.
Să presupunem că doriți să complotați semnele elevilor într-o clasă. În cazul în care numărul maxim de puncte pentru test a fost de 200, dar niciunul dintre elevi nu a obținut mai mult de 180 de puncte, scara va ajunge cel mai probabil la 180. În astfel de cazuri, cititorii nu vor avea nici o posibilitate să știe dacă marcajele maxime au fost 180 sau 200.
Chart.js are mai multe opțiuni încorporate care vă permit să controlați diferite taste pentru scale. Puteți specifica valoarea minimă și maximă pentru scale utilizând butonul min și max chei. Mărimea treptei scalei poate fi controlată utilizând mărimea pasului proprietate. În acest fel, puteți determina câte linii de rețea trebuie să fie desenate pe grafic. O altă modalitate de a stabili o limită a numărului de linii de grilă și de căpușe arătate pe o diagramă este de a utiliza maxTicksLimit cheie.
Aici este codul pentru a specifica valorile scării minime și maxime pentru scara orizontală de pe diagrama bară pentru un tutorial anterior din această serie.
var chartOptions = scale: yAxes: barPercentage: 0.5, gridLines: display: false], xAxes: gridLines: zeroLineColor: max: 6500, stepSize: 1300, scaleLabel: display: true, labelString: "Densitate în kg / m3"] elemente: rectangle: borderSkipped: 'left',;
La fel ca scara liniară, puteți crea, de asemenea, scale logaritmice pentru a calcula valori pe grafic. În acest caz, se folosește interpolarea logaritmică pentru a determina poziția unui punct pe axe. Aceste scale pot fi plasate și pe axa x și pe axa y.
Acest tip de scară este utilizat pentru tipurile de diagrame radar și de zonă polară. Spre deosebire de scara liniară obișnuită, aceasta suprapune zona graficului în loc să fie poziționată pe axă.
Există o mulțime de chei care vizează în mod specific scalele radiale. De exemplu, puteți utiliza funcția lineArc cheie pentru a specifica dacă liniile de rețea ar trebui să fie circulare sau drepte. Valoarea implicită este fals pentru grafice radar și Adevărat pentru tabelele zonei polar.
Puteți controla aspectul liniilor care radiază din centrul graficului până la etichetele punctului utilizând angleLines cheie. Acceptă un obiect ca valoare. Obiectul poate conține chei pentru a controla culoarea și lățimea liniilor de unghi. Puteți ascunde liniile de unghi prin setarea valorii afişa cheia pentru fals. Culoarea și lățimea liniilor de unghi pot fi controlate folosind culoare și lățimea liniei chei.
Aspectul etichetelor de punct poate fi controlat folosind pointLabels cheie. La fel ca liniile unghiulare, această cheie acceptă și un obiect ca valoare. Rețineți că aceste opțiuni au efect doar când valoarea lineArc este setat sa fals. Culoarea fontului, familia, dimensiunea și stilul pot fi specificate utilizând fONTCOLOR, familie de fonturi, marimea fontului, și stilul fontului chei.
De asemenea, puteți seta o valoare minimă și maximă pentru scală folosind min și max chei. Dimensiunea pasului și numărul maxim de căpușe de pe scară pot fi specificate utilizând mărimea pasului și maxTicksLimit chei. Aceste opțiuni sunt disponibile în formatul căpușe cheie. Unele alte chei disponibile în interior căpușe sunteți showLabelBackdrop, backdropColor, backdropPaddingX, și backDropPaddingY. Aveți posibilitatea să le utilizați pentru a arăta sau ascunde fundalul din spatele etichetelor de bifare și pentru a controla lățimea, înălțimea și culoarea.
De asemenea, puteți utiliza funcția GridLines cheie pe care am folosit-o pentru graficul de linie pentru a seta o culoare și o lățime pentru liniile de rețea într-o diagramă radar. Iată câteva opțiuni pentru a crea o diagramă radar cu scale personalizate.
var chartOptions = scară: gridLines: culoare: "negru", lineWidth: 3, angleLines: display: false, ticks: beginAtZero: true, min: 0, max: 100, stepSize: : fontSize: 18, fontColor: "verde", legenda: position: 'left';
Puteți utiliza o scală de timp pentru a afișa ore și date într-o diagramă. După cum sa menționat în tutorialul introductiv Chart.js, trebuie să includeți Moment.js în proiectele dvs. pentru a afișa timpul. O restricție privind utilizarea unei scări de timp este că poate fi afișată numai pe axa x. Toate opțiunile de configurare pentru scala de timp se află sub timp subopțiunea.
Pentru a crea o scală de timp, trebuie să setați valoarea tip cheia pentru timp sub xAxes sub-opțiune. După aceasta, puteți seta valoarea diferitelor chei de sub timp. Unitatea care trebuie utilizată pentru a desena căpușe este setată folosind unitate cheie.
Pasul unității poate fi specificat utilizând funcția unitStepSize cheie. Formatul în care trebuie afișate etichetele pentru căpușe este specificat folosind displayFormats sub-opțiune. Puteți citi mai multe despre formatele de șir permise pe site-ul Moment.js.
Formatul în care este afișat ora în tooltips poate fi specificat folosind tooltipFormat cheie.
Puteți, de asemenea, rotunji timpul înainte de al compila pe diagramă folosind rundă cheie. Aveți grijă atunci când setați o valoare pentru rundă. Să presupunem că i-ai stabilit valoarea ora și există două aspecte care trebuie să fie reprezentate pe diagramă. Dacă un moment este 5:30 AM și altul este 5:50, ambele vor fi reprezentate pe marcajul 5:00 AM. Setarea valorii sale la minut le va compila pe marcajul 5:30 și respectiv 5:50.
Diagrama grafică reprezentată la începutul tutorialului poate fi reprezentată folosind o scală de timp cu ajutorul codului următor.
var chartOptions = legend: display: true, position: 'top', etichete: boxWidth: 80, fontColor: 'negru', scale: unit: 'h: mm: ss a', displayFormats: hour: 'MMM D, h: mm A'], yAxes: [gridLines: color: "negru", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Viteza în mile pe oră", fontColor: "verde"];
Acest tutorial te-a ajutat să înveți despre diferite tipuri de scale în Chart.js. Acum puteți personaliza cu ușurință scalele dintr-o diagramă, controlând culoarea, valoarea minimă și maximă, numărul de căpușe și alți factori.
După ce ați citit toate cele cinci tutoriale din această serie, acum ar trebui să puteți crea toate tipurile de diagrame disponibile în Chart.js. Sper că ți-a plăcut tutorialul și seria.
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, vă rugăm să ne anunțați în comentarii. Ați folosit vreodată această bibliotecă în propriile dvs. proiecte? Vă rugăm să împărtășiți câteva sfaturi în comentarii.
Accentsconagua