Adăugați diagrame la aplicația dvs. Android utilizând MPAndroidChart

Dacă aplicația dvs. se ocupă de o mulțime de date, folosiți grafice în loc de tabele pentru a afișa că datele ar putea duce la o experiență mult mai bună pentru utilizatori. În acest tutorial, veți învăța despre o bibliotecă populară open-graffing charting MPAndroidChart. Diagramele acestei biblioteci sunt foarte personalizabile, interactive și ușor de creat.

Cerințe preliminare

Asigurați-vă că aveți cea mai recentă versiune de Android Studio instalată. Puteți să-l obțineți de pe site-ul Android Developer.

1. Adăugarea MPAndroidChart la un proiect

Pentru a utiliza această bibliotecă în proiectul dvs. Android, tot ce trebuie să faceți este:

Descărcați cea mai recentă versiune a bibliotecii de la Github. La momentul redactării, ultima versiune este 1.7.4.
Copie mpandroidchartlibrary-1-7-4.jar la proiectul tău libs director.
În aplicația Android Studio, faceți clic dreapta pe fișierul JAR și selectați Adăugați ca Bibliotecă.

2. Crearea unui a `DataSet`

Toate datele ar trebui să fie convertite în DataSet obiecte înainte ca acestea să poată fi utilizate de o diagramă. Diferitele tipuri de diagrame folosesc diferite subclase ale DataSet clasă. De exemplu, a BarChart utilizează a BarDataSet instanță. În mod similar, a Graficul proporțiilor utilizează a PieDataSet instanță.
În loc să purtăm pur și simplu numere aleatorii pentru a genera o diagramă eșantion, să luăm în considerare un scenariu ipotetic. Alice și Bob sunt prieteni. Alice îl cheamă pe Bob de mai multe ori pe lună pentru a ști ce are de făcut. Bob face o notă ori de câte ori îl cheamă.

În acest tutorial, folosim notele lui Bob pentru a crea o diagramă care să fie afișată de câte ori Alice la sunat pe Bob. Iată ce a remarcat Bob:

Lună	Numărul de apeluri
ianuarie	4
februarie	8
Martie	6
Aprilie	12
Mai	18
iunie	9

O diagramă de bare pare perfectă pentru acest tip de date. Pentru a afișa datele într-o diagramă, trebuie să creați o BarDataSet instanță. Puteți urma aceleași pași pentru a crea instanțe ale altor subclase din DataSet.

Fiecare valoare individuală a datelor brute trebuie reprezentată ca o valoare Intrare. Un ArrayList de așa fel Intrare obiectele sunt folosite pentru a crea un DataSet. Să creăm câteva BarEntry obiecte și adăugați-le la un ArrayList:

ArrayList intrări = nou ArrayList <> (); entries.add (noul BarEntry (4f, 0)); entries.add (noul BarEntry (8f, 1)); entries.add (noul BarEntry (6f, 2)); entries.add (noul BarEntry (12f, 3)); entries.add (noul BarEntry (18f, 4)); entries.add (noul BarEntry (9f, 5));

Acum, că ArrayList de Intrare obiectele sunt gata, putem crea o DataSet in afara:

Setul de date BarDataSet = noul BarDataSet (intrări, "# de apeluri");

3. Definirea etichetelor axei X.

Am adăugat deja mai multe valori în diagrama noastră, dar nu vor avea prea mult sens pentru utilizator decât dacă îi oferim etichete semnificative. Fiecare etichetă a axei x este reprezentată utilizând a Şir si un ArrayList este utilizat pentru a stoca toate etichetele.

ArrayList etichete = noul ArrayList(); labels.add ( "ianuarie"); labels.add ( "februarie"); labels.add ( "martie"); labels.add ( "Aprilie"); labels.add ( "mai"); labels.add ( "iunie");

4. Crearea unei diagrame

Toate graficele acestei biblioteci sunt subclase ale ViewGroup, ceea ce înseamnă că le puteți adăuga cu ușurință la orice aspect. Puteți defini graficul utilizând un fișier XML sau un cod Java. Dacă graficul va ocupa întregul ecran Activitate sau Fragment, apoi codul Java este mai ușor:

Grafic BarChart = noul BarChart (context); setContentView (graficul);

Aceasta creează o diagramă goală fără date. Să folosim setul de date și lista de etichete create în pașii anteriori pentru a defini datele din această diagramă.

Date BarData = BarData noi (etichete, set de date); chart.setData (date);

Să adăugăm, de asemenea, o descriere în diagramă.

chart.setDescription ("de câte ori a numit Alice Bob");

Dacă rulați acum aplicația pe un dispozitiv Android, ar trebui să puteți vedea o diagramă de bare care arată similară celei indicate mai jos. Diagrama este interactivă și răspunde la mișcarea de mărire și glisare.

5. Utilizarea șabloanelor de culori

Dacă nu vă plac culorile implicite, puteți utiliza funcția DataSet clasa lui setColors metodă de modificare a schemei de culori. Cu toate acestea, MPAndroidChart vine, de asemenea, cu un număr de șabloane de culori predefinite care vă permit să modificați aspectul și setul de date fără a trebui să faceți față valorilor individuale de culoare.

În versiunea curentă a acestei biblioteci sunt disponibile următoarele șabloane:

ColorTemplate.LIBERTY_COLORS
ColorTemplate.COLORFUL_COLORS
ColorTemplate.JOYFUL_COLORS
ColorTemplate.PASTEL_COLORS
ColorTemplate.VORDIPLOM_COLORS

Pentru a asocia un șablon de culoare cu un set de date, trebuie să utilizați setColors metodă. Iată un exemplu:

dataset.setColors (ColorTemplate.COLORFUL_COLORS);

Rulați aplicația încă o dată pentru a vedea o diagramă cu culori mai vibrante.

6. Adăugarea de animații

Toate graficele din această bibliotecă acceptă animații, pe care le puteți utiliza pentru a vă face să apară mai plin de hărți. animateXY metoda este folosită pentru a anima ambele axe ale graficului. Dacă doriți să animați numai una dintre axe, puteți folosi animateX sau animateY pentru a anima axa x sau respectiv axa y. Trebuie să specificați durata (în milisecunde) a animației atunci când apelați aceste metode. De exemplu, pentru a anima numai axa y, adăugați următorul fragment de cod:

chart.animateY (5000);

7. Utilizarea liniilor limită

Puteți adăuga linii de limită la o diagramă pentru a adăuga mai multă semnificație diagramelor dvs. Linile de limită au sens numai pentru anumite tipuri de diagrame, cum ar fi graficele barelor, diagramele de linii și diagramele scatter.

În exemplul nostru, în cazul în care Alice îl cheamă pe Bob de mai multe ori pe lună, să spunem că Bob se enerva dacă Alice îl sună de mai mult de zece ori pe lună. Pentru a afișa aceste informații, am putea adăuga o linie limită pentru acea valoare. Iată cum faceți acest lucru:

Linia LimitLine = noua LimitLine (10f); data.addLimitLine (line);

8. Salvarea diagramei ca imagine

De asemenea, MPAndroidChart vă permite să salvați starea curentă a unui grafic ca imagine. Pentru a utiliza această funcție, trebuie mai întâi să acordați aplicației permisiunea de a scrie pe cardul SD al dispozitivului. Puteți face acest lucru adăugând următorul cod la dvs. AndroidManifest.xml:

Aveți două metode de alegere:

saveToGallery Această metodă salvează graficul dvs. ca fișier JPEG. De asemenea, vă permite să specificați calitatea sau raportul de compresie al imaginii.
saveToPath Această metodă salvează graficul dvs. ca fișier PNG în calea pe care o specificați.

De exemplu, pentru a salva graficul ca fișier JPEG, puteți utiliza următorul fragment de cod:

chart.saveToGallery ("mychart.jpg", 85); // 85 este calitatea imaginii

Concluzie

În acest tutorial, ați învățat cum să utilizați biblioteca MPAndroidChart pentru a crea diagrame plăcute și interactive. Din motive de coerență, am folosit grafice în acest tutorial. Cu toate acestea, puteți urma aceleași pași pentru a crea alte tipuri de diagrame. Pentru a afla mai multe despre această bibliotecă, vă încurajez să citiți documentația și exemplele despre Github.

Cod