Voeg grafieken toe aan uw Android-app met behulp van MPAndroidChart

Als uw app veel gegevens verwerkt, kan het gebruik van diagrammen in plaats van tabellen om die gegevens weer te geven, leiden tot een veel betere gebruikerservaring. In deze tutorial leer je meer over een populaire open source diagrambibliotheek MPAndroidChart. De kaarten van deze bibliotheek zijn zeer aanpasbaar, interactief en eenvoudig te maken.

voorwaarden

Zorg ervoor dat je de nieuwste versie van Android Studio hebt geïnstalleerd. Je kunt het krijgen van de Android Developer-website.

1. MPAndroidChart toevoegen aan een project

Als u deze bibliotheek in uw Android-project wilt gebruiken, hoeft u alleen maar het volgende te doen:

Download de nieuwste versie van de bibliotheek van Github. Op het moment van schrijven is de nieuwste versie 1.7.4.
Kopiëren mpandroidchartlibrary-1-7-4.jar naar uw project libs directory.
Klik in Android Studio met de rechtermuisknop op het JAR-bestand en selecteer Voeg toe als bibliotheek.

2. Creëren van een `DataSet`

Alle gegevens moeten worden omgezet in een DataSet object voordat het kan worden gebruikt door een diagram. Verschillende soorten diagrammen gebruiken verschillende subklassen van de DataSet klasse. Bijvoorbeeld a barchart gebruikt een BarDataSet aanleg. Evenzo, a PieChart gebruikt een PieDataSet aanleg.
In plaats van alleen willekeurige getallen te behandelen om een voorbeelddiagram te genereren, laten we een hypothetisch scenario overwegen. Alice en Bob zijn vrienden. Alice belt Bob meerdere keren per maand om te weten wat hij van plan is. Bob noteert telkens wanneer ze hem belt.

In deze zelfstudie gebruiken we de notities van Bob om een diagram te maken dat kan worden weergegeven het aantal keren dat Alice Bob heeft gebeld. Dit is wat Bob heeft genoteerd:

Maand	Aantal oproepen
januari-	4
februari	8
maart	6
april	12
mei	18
juni-	9

Een staafdiagram lijkt perfect voor dit type gegevens. Om de gegevens in een grafiek weer te geven, moeten we een BarDataSet aanleg. U kunt dezelfde stappen volgen om instanties van andere subklassen van te maken DataSet.

Elke individuele waarde van de onbewerkte gegevens moet worden weergegeven als een binnenkomst. Een ArrayList dergelijke binnenkomst objecten worden gebruikt om een te maken DataSet. Laten we er een paar maken BarEntry objecten en voeg ze toe aan een ArrayList:

ArrayList entries = new ArrayList <> (); entries.add (nieuwe BarEntry (4f, 0)); entries.add (nieuwe BarEntry (8f, 1)); entries.add (nieuwe BarEntry (6f, 2)); entries.add (nieuwe BarEntry (12f, 3)); entries.add (nieuwe BarEntry (18f, 4)); entries.add (nieuwe BarEntry (9f, 5));

Nu dat het ArrayList van binnenkomst objecten zijn klaar, we kunnen een maken DataSet eruit:

BarDataSet-gegevensset = nieuwe BarDataSet (vermeldingen, "# van oproepen");

3. Definiëren van de X-as-labels

We hebben al verschillende waarden aan onze grafiek toegevoegd, maar deze hebben weinig zin voor de gebruiker, tenzij we ze betekenisvolle labels geven. Elke x-as label wordt weergegeven met behulp van a Draad en een ArrayList wordt gebruikt om alle labels op te slaan.

ArrayList labels = nieuwe ArrayList(); labels.add ( "Januari"); labels.add ( "Februari"); labels.add ( "Maart"); labels.add ( "April"); labels.add ( "mei"); labels.add ( "Juni");

4. Een diagram maken

Alle grafieken van deze bibliotheek zijn subklassen van ViewGroup, wat betekent dat je ze gemakkelijk aan elke lay-out kunt toevoegen. U kunt uw grafiek definiëren met behulp van een XML-bestand of Java-code. Als de grafiek het volledige scherm van een gaat beslaan Activiteit of Fragment, dan is het gebruik van Java-code eenvoudiger:

BarChart-grafiek = nieuwe BarChart (context); setContentView (grafiek);

Hiermee maakt u een lege grafiek zonder gegevens. Laten we de gegevensset en lijst met labels gebruiken die we in de vorige stappen hebben gemaakt om de gegevens van deze grafiek te definiëren.

BarData-gegevens = nieuwe BarData (labels, dataset); chart.setData (data);

Laten we ook een beschrijving toevoegen aan het diagram.

chart.setDescription ("# tijden Alice noemde Bob");

Als u uw app nu op een Android-apparaat uitvoert, zou u een staafdiagram moeten kunnen zien dat er ongeveer uitziet als hieronder. Het diagram is interactief en reageert op knijpen om te zoomen en te slepen.

5. Kleursjablonen gebruiken

Als u niet van de standaardkleuren houdt, kunt u de DataSet klasse setColors methode om het kleurenschema te wijzigen. MPAndroidChart wordt echter ook geleverd met een aantal vooraf gedefinieerde kleurensjablonen waarmee u het uiterlijk van uw gegevensset kunt wijzigen zonder rekening te houden met de afzonderlijke kleurwaarden..

In de huidige versie van deze bibliotheek zijn de volgende sjablonen beschikbaar:

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

Als u een kleurensjabloon aan een gegevensset wilt koppelen, moet u de setColors methode. Hier is een voorbeeld:

dataset.setColors (ColorTemplate.COLORFUL_COLORS);

Voer uw app nog een keer uit om een diagram met levendigere kleuren te bekijken.

6. Animaties toevoegen

Alle grafieken van deze bibliotheek ondersteunen animaties, die u kunt gebruiken om uw diagrammen levendiger te maken. De animateXY methode wordt gebruikt om beide assen van de grafiek te animeren. Als u slechts één van de assen wilt animeren, kunt u gebruiken animateX of animateY om respectievelijk de x-as of y-as te animeren. U moet de duur (in milliseconden) van de animatie opgeven wanneer u deze methoden aanroept. Als u bijvoorbeeld alleen de y-as wilt animeren, voegt u het volgende codefragment toe:

chart.animateY (5000);

7. Gebruik van limietlijnen

U kunt limietregels aan een diagram toevoegen om meer betekenis aan uw diagrammen toe te voegen. Limietlijnen zijn alleen zinvol voor bepaalde typen diagrammen, zoals staafdiagrammen, lijndiagrammen en spreidingsdiagrammen.

In ons voorbeeld, waar Alice meerdere keren per maand Bob belt, laten we zeggen dat Bob geïrriteerd raakt als Alice hem meer dan tien keer per maand belt. Om deze informatie te tonen, kunnen we een limietregel voor die waarde toevoegen. Hier is hoe je dit doet:

LimitLine-regel = nieuwe LimitLine (10f); data.addLimitLine (line);

8. De kaart opslaan als een afbeelding

Met MPAndroidChart kunt u ook de huidige status van een grafiek opslaan als een afbeelding. Als u deze functie wilt gebruiken, moet u uw app eerst toestemming geven om naar de SD-kaart van het apparaat te schrijven. U kunt dit doen door de volgende code toe te voegen aan uw AndroidManifest.xml:

U kunt kiezen uit twee methoden:

Sla op in je gallerij Met deze methode wordt uw diagram opgeslagen als een JPEG-bestand. Hiermee kunt u ook de kwaliteit of compressieverhouding van de afbeelding opgeven.
saveToPath Met deze methode wordt uw diagram opgeslagen als een PNG-bestand naar het pad dat u opgeeft.

Als u uw diagram bijvoorbeeld wilt opslaan als een JPEG-bestand, kunt u het volgende codefragment gebruiken:

grafiek.saveToGallery ("mychart.jpg", 85); // 85 is de kwaliteit van de afbeelding

Conclusie

In deze zelfstudie hebt u geleerd hoe u de MPAndroidChart-bibliotheek gebruikt om grafieken te maken die zowel aangenaam als interactief zijn. Voor de consistentie heb ik gedurende deze tutorial staafdiagrammen gebruikt. U kunt echter dezelfde stappen volgen om andere soorten diagrammen te maken. Voor meer informatie over deze bibliotheek raad ik u aan de documentatie en voorbeelden van Github te lezen.

Code