Share
În primul tutorial introductiv al Chart.js al seriei, ați învățat cum să instalați și să utilizați Chart.js într-un proiect. De asemenea, ați învățat despre unele opțiuni globale de configurare care pot fi utilizate pentru a schimba fonturile și sfaturile de instrumente ale diferitelor diagrame. În acest tutorial, veți învăța cum să creați grafice de linii și bare în Chart.js.
Diagramele linii sunt utile atunci când doriți să afișați modificările valorii unei variabile date în ceea ce privește modificările unei alte variabile. Cealaltă variabilă este de obicei timpul. De exemplu, diagramele de linii pot fi folosite pentru a afișa viteza unui vehicul în anumite intervale de timp.
Chart.js vă permite să creați diagrame de linii prin setarea tip cheia pentru linia. Iată un exemplu:
var lineChart = diagramă nouă (speedCanvas, type: 'line', date: speedData, opțiuni: chartOptions);
Vom furniza acum datele și opțiunile de configurare de care avem nevoie pentru a compila graficul de linie.
var speedData = etichete: ["0s", "10s", "20s", "30s", "40s", "50s", "60s" 0, 59, 75, 20, 20, 55, 40],]; var chartOptions = legendă: display: true, position: 'top', etichete: boxWidth: 80, fontColor: 'negru';
Deoarece nu am oferit nici o culoare pentru diagrama de linie, culoarea implicită RGBA (0,0,0,0.1) va fi folosit. Nu am făcut nicio modificare în tooltip sau în legendă. Puteți citi mai multe despre modificarea dimensiunii căsuței, a sfaterii degetului sau a legendei din prima parte a seriei.
În această parte, ne vom concentra pe diferite opțiuni disponibile în mod special pentru modificarea diagramelor de linii. Toate opțiunile și datele pe care le-am furnizat mai sus vor crea următoarea diagramă.
Culoarea zonei sub curbă este determinată de culoare de fundal cheie. Toate graficele de linii desenate folosind această metodă vor fi umplute cu culoarea dată. Puteți seta valoarea completati cheia pentru fals dacă doriți doar să desenați o linie și să nu o umpleți cu nici o culoare.
Un lucru mai mult pe care l-ați observat este că folosim puncte de date discrete pentru a compila graficul. Biblioteca interpolează automat valorile tuturor celorlalte puncte utilizând algoritmi încorporați.
În mod prestabilit, punctele sunt reprezentate grafic folosind o interpolare cubică ponderată particularizat. Cu toate acestea, puteți seta și valoarea cubicInterpolationMode cheia pentru monotonie pentru a calcula mai precis punctele atunci când graficul pe care îl comportați este definit de ecuație y = f (x). Tensiunea curbei Bezier este determinată de lineTension cheie. Puteți seta valoarea sa la zero pentru a desena linii drepte. Rețineți că această cheie este ignorată atunci când valoarea cubicInterpolationMode a fost deja specificată.
De asemenea, puteți seta valoarea culorii de margine și lățimea acesteia utilizând borderColor și lățimea graniței chei. Dacă doriți să plotați graficul utilizând o linie punctată în loc de o linie solidă, puteți utiliza borderDash cheie. Acceptă o matrice ca valoare a cărei elemente determină lungimea și spațierea respectivelor liniuțe.
Apariția punctelor trasate poate fi controlată utilizând pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, și pointHoverRadius proprietăți. Este deasemenea o pointHitRadius cheie, care determină distanța la care punctele planificate vor începe să interacționeze cu mouse-ul.
var speedData = etichete: ["0s", "10s", "20s", "30s", "40s", "50s", "60s" 0, 59, 75, 20, 20, 55, 40], lineTensiunea: 0, umplere: falsă, borderColor: 'portocaliu', fundalColor: : 'rgba (255,150,0,0,5)', punctRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: 'rectRounded'];
De mai sus speedData obiectele parcelează aceleași puncte de date ca și diagrama anterioară, dar cu valori personalizate stabilite pentru toate proprietățile.
Puteți, de asemenea, să complotați mai multe linii pe o singură diagramă și să oferiți diferite opțiuni pentru a desena fiecare dintre ele astfel:
var dataFirst = etichetă: "Mașină A - viteză (mph)", date: [0, 59, 75, 20, 20, 55, 40], lineTension: 0.3, // Setați mai multe opțiuni; var dataSecond = eticheta: "Masina B - viteza (mph)", date: [20, 15, 60, 60, 65, 30, 70], // Setați mai multe opțiuni; var speedData = etichete: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], seturi de date: [dataFirst, dataSecond]; var lineChart = grafic nou (speedCanvas, type: 'line', data: speedData);
Barile grafice sunt utile atunci când doriți să comparați o singură valoare pentru diferite entități - de exemplu, numărul de mașini vândute de diferite companii sau numărul de persoane din anumite grupe de vârstă dintr-un oraș. Puteți crea grafice de bare în Chart.js prin setarea tip cheia pentru bar. În mod implicit, aceasta va crea grafice cu bare verticale. Dacă doriți să creați diagrame cu bare orizontale, va trebui să setați tip la bara orizontala.
var barChart = diagramă nouă (densitateCanvas, tip: 'bar', date: densitateData, opțiuni: chartOptions);
Să formăm o diagramă a barelor care compară densitatea tuturor planetelor din sistemul nostru solar. Datele privind densitatea au fost preluate din fișa de date planetare furnizată de NASA.
var densitateData = etichetă: "Densitatea planetelor (kg / m3)", date: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]; var barChart = diagramă nouă (densitateCanvas, tip: 'bar', date: etichete: "Mercur", "Venus", "Pământ", "Marte", "Jupiter" Neptun "], seturi de date: [densityData]);
Parametrii furnizați mai sus vor crea următoarea diagramă:
La fel ca și diagrama liniilor, barele sunt umplute cu o culoare gri deschis și de această dată. Puteți schimba culoarea barelor utilizând culoare de fundal cheie. În mod similar, culoarea și lățimea marginilor diferitelor bare pot fi specificate utilizând borderColor și lățimea graniței chei.
Dacă doriți ca biblioteca să sări peste desenul de margine pentru o anumită margine, puteți să specificați marginea ca valoare a borderSkipped cheie. Puteți să-i setați valoarea top, stânga, fund, sau dreapta. De asemenea, puteți schimba culoarea de fundal și de fundal a diferitelor bare atunci când acestea sunt plimbate cu ajutorul hoverBorderColor și hoverBackgroundColor cheie.
Barele din bara de mai sus au fost dimensionate automat. Cu toate acestea, puteți controla lățimea barelor individuale utilizând barThickness și barPercentage proprietăți. barThickness cheia este folosită pentru a seta grosimea barelor în pixeli și barPercentage este folosit pentru a seta grosimea ca procent din lățimea categoriei disponibile.
De asemenea, puteți să arătați sau să ascundeți o anumită axă cu ajutorul acesteia afişa cheie. Setarea valorii afişa la fals va ascunde acea axă particulară. Puteți citi mai multe despre toate aceste opțiuni pe pagina de documentare.
Să facem diagrama densității mai interesantă prin suprascrierea valorilor implicite pentru barele de bare utilizând codul următor.
Densitatea planetelor (kg / m3) ", date: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: [rgba (0, 99, 132, 0.6 ), rgba (30, 99, 132, 0.6), rgba (60, 99, 132, 0.6), rgba (90, , Rgba (150, 99, 132, 0.6), rgba (180, 99, 132, 0.6), rgba (210, 99, 132, 0.6) , 132, 0.6) '], borderColor: [rgba (0, 99, 132, 1)], rgba (30, 99, 132, 1) 'rgba (150,99,132,1)', 'rgba (120,99,132,1)', 'rgba (150,99,132,1) ',' rgba (210, 99, 132, 1) ',' rgba (240, 99, 132, 1) '], frontierăWidth: 2, hoverBorderWidth: 0; var chartOptions = scale: yAxes: [barPercentage: 0.5] elemente: dreptunghi: borderSkipped: 'left',; var barChart = diagramă nouă (densitateCanvas, tip: orizontalBar, date: etichete: "Mercur", "Venus", "Pământ", "Marte", "Jupiter" Neptun "], seturi de date: [densityData],, opțiuni: chartOptions);
densityData obiect este folosit pentru a seta culoarea de fundal și de fundal a barelor. Există două lucruri demne de remarcat în codul de mai sus. În primul rând, valorile barPercentage și borderSkipped proprietățile au fost stabilite în interiorul chartOptions obiect în loc de dataDensity obiect.
În al doilea rând, graficul tip a fost setat la bara orizontala de data asta. Acest lucru înseamnă, de asemenea, că va trebui să schimbați valoarea barThickness și barPercentage pentru axa y în loc de axa x pentru ca acestea să aibă vreun efect asupra barelor.
Parametrii furnizați mai sus vor crea următoarea schemă de bare.
De asemenea, puteți compune mai multe seturi de date în aceeași diagramă, atribuind un id a axei corespunzătoare unui anumit set de date. xAxisID cheia este utilizată pentru a atribui id de orice axă x la setul de date. În mod similar, yAxisID cheia este utilizată pentru a atribui id a oricărei axe y la setul de date. Ambele axe au, de asemenea, un id cheie pe care le puteți utiliza pentru a le atribui ID-uri unice.
Dacă ultimul paragraf a fost puțin confuz, exemplul următor va ajuta la clarificarea lucrurilor.
Densitatea plantei (kg / m3) ", date: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: rgba (0, 99, 132, 0.6) ', borderColor:' rgba (0, 99, 132, 1) ', yAxisID: "axa y-densitate"; var gravitateData = etichetă: "Gravitatea planetei (m / s2)", date: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0] ', borderColor:' rgba (99, 132, 0, 1) ', yAxisID: "axa y-gravitate"; var planetData = etichete: "Mercur", "Venus", "Pământ", "Marte", "Jupiter", "Saturn", "Uranus", "Neptun"], seturi de date: [densityData, gravityData]; Variabile: [id: "axa y-densitate", id: "y-axis-gravity"] var chartOptions = scales: xAxes: [pPercentage: 1, categoryPercentage: 0.6] ; var barChart = diagramă nouă (densitateCanvas, tip: 'bar', date: planetData, opțiuni: chartOptions);
Aici am creat două y-axe cu ID-uri unice și au fost atribuite seturilor de date individuale folosind yAxisID cheie. barPercentage și categoryPercentage cheile au fost folosite aici pentru a grupa barele pentru planete individuale împreună. reglaj categoryPercentage la o valoare mai mică crește spațiul dintre barele diferitelor planete. În mod similar, stabilirea barPercentage la o valoare mai mare reduce spațiul dintre barele aceleiași planete.
În acest tutorial, am acoperit toate aspectele diagramelor de linii și grafice în diagramă. Acum ar trebui să puteți să creați diagrame de bază, să le modificați aspectul și să compilați mai multe seturi de date pe aceeași diagramă fără probleme. În următoarea parte a seriei, veți afla despre diagramele radar și zona de polar din Chart.js.
Sper că ți-a plăcut acest tutorial. Dacă aveți întrebări, vă rugăm să ne anunțați în comentarii.
Accentsconagua