Aggiungi grafici alla tua app per Android utilizzando MPAndroidChart

Se la tua app si occupa di molti dati, l'utilizzo di grafici anziché di tabelle per visualizzare tali dati potrebbe portare a un'esperienza utente notevolmente migliore. In questo tutorial, imparerai a conoscere una famosa libreria di codici open source MPAndroidChart. I grafici di questa libreria sono altamente personalizzabili, interattivi e facili da creare.

Prerequisiti

Assicurati di aver installato l'ultima versione di Android Studio. Puoi scaricarlo dal sito web degli sviluppatori Android.

1. Aggiunta di MPAndroidChart a un progetto

Per utilizzare questa libreria nel tuo progetto Android, tutto ciò che devi fare è:

Scarica l'ultima versione della libreria da Github. Al momento della scrittura, l'ultima versione è 1.7.4.
copia mpandroidchartlibrary-1-7-4.jar al tuo progetto libs elenco.
In Android Studio, fai clic con il pulsante destro del mouse sul file JAR e seleziona Aggiungi come libreria.

2. Creazione di a `DataSet`

Tutti i dati devono essere convertiti in a DataSet oggetto prima che possa essere utilizzato da un grafico. Diversi tipi di grafici utilizzano diverse sottoclassi di DataSet classe. Ad esempio, a Grafico a barre usa a BarDataSet esempio. Allo stesso modo, a Grafico a torta usa a PieDataSet esempio.
Invece di occuparsi semplicemente di numeri casuali per generare un grafico di esempio, consideriamo uno scenario ipotetico. Alice e Bob sono amici. Alice chiama Bob diverse volte al mese per sapere cosa sta combinando. Bob fa una nota ogni volta che lei lo chiama.

In questo tutorial, utilizziamo le note di Bob per creare un grafico da mostrare il numero di volte in cui Alice chiamava Bob. Ecco cosa ha annotato Bob:

Mese	Numero di chiamate
gennaio	4
febbraio	8
marzo	6
aprile	12
potrebbe	18
giugno	9

Un grafico a barre sembra perfetto per questo tipo di dati. Per visualizzare i dati in un grafico, dobbiamo creare un BarDataSet esempio. È possibile seguire la stessa procedura per creare istanze di altre sottoclassi di DataSet.

Ogni singolo valore dei dati grezzi dovrebbe essere rappresentato come un Iscrizione. Un Lista di array di tale Iscrizione gli oggetti sono usati per creare un DataSet. Creiamo alcuni BarEntry oggetti e aggiungili a un Lista di array:

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

Ora che il Lista di array di Iscrizione gli oggetti sono pronti, possiamo creare a DataSet fuori di esso:

Set di dati BarDataSet = nuovo BarDataSet (voci, "Numero di chiamate");

3. Definizione delle etichette dell'asse X.

Abbiamo già aggiunto diversi valori al nostro grafico, ma non avranno molto senso per l'utente a meno che non diamo loro etichette significative. Ogni etichetta dell'asse x è rappresentata utilizzando a Stringa e un Lista di array è usato per memorizzare tutte le etichette.

Lista di array labels = new ArrayList(); labels.add ( "Gennaio"); labels.add ( "Febbraio"); labels.add ( "marzo"); labels.add ( "Aprile"); labels.add ( "maggio"); labels.add ( "Giugno");

4. Creazione di un grafico

Tutti i grafici di questa libreria sono sottoclassi di ViewGroup, il che significa che puoi facilmente aggiungerli a qualsiasi layout. È possibile definire il grafico utilizzando un file XML o codice Java. Se il grafico sta per occupare l'intero schermo di un Attività o Frammento, quindi usare il codice Java è più semplice:

Grafico BarChart = nuovo BarChart (contesto); setContentView (grafico);

Questo crea un grafico vuoto senza dati. Usiamo il set di dati e l'elenco di etichette che abbiamo creato nei passaggi precedenti per definire i dati di questo grafico.

Dati BarData = nuovo BarData (etichette, set di dati); chart.setData (dati);

Aggiungiamo anche una descrizione al grafico.

chart.setDescription ("# volte che Alice ha chiamato Bob");

Se ora esegui la tua app su un dispositivo Android, dovresti riuscire a visualizzare un grafico a barre simile a quello mostrato di seguito. Il grafico è interattivo e risponde ai gesti di pizzicamento e zoom.

5. Uso dei modelli di colore

Se non ti piacciono i colori di default, puoi usare il DataSet La classe di setColors metodo per cambiare lo schema dei colori. Tuttavia, MPAndroidChart viene fornito con un numero di modelli di colori predefiniti che ti consentono di modificare l'aspetto del set di dati senza dover gestire i singoli valori di colore.

Nella versione corrente di questa libreria, sono disponibili i seguenti modelli:

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

Per associare un modello di colore a un set di dati, è necessario utilizzare il setColors metodo. Ecco un esempio:

dataset.setColors (ColorTemplate.COLORFUL_COLORS);

Esegui l'app ancora una volta per visualizzare un grafico con colori più vivaci.

6. Aggiunta di animazioni

Tutti i grafici di questa libreria supportano le animazioni, che puoi utilizzare per rendere i tuoi grafici più vivaci. Il animateXY il metodo è usato per animare entrambi gli assi del grafico. Se si desidera animare solo uno degli assi, è possibile utilizzare animateX o animateY per animare rispettivamente l'asse x o l'asse y. Devi specificare la durata (in millisecondi) dell'animazione quando chiami questi metodi. Ad esempio, per animare solo l'asse y, aggiungi il seguente frammento di codice:

chart.animateY (5000);

7. Utilizzo delle linee limite

Puoi aggiungere linee limite a un grafico per aggiungere più significato ai tuoi grafici. Le linee limite hanno senso solo per alcuni tipi di grafici, come grafici a barre, grafici a linee e grafici a dispersione.

Nel nostro esempio, dove Alice chiama Bob diverse volte al mese, diciamo che Bob si arrabbia se Alice lo chiama più di dieci volte al mese. Per mostrare queste informazioni, potremmo aggiungere una linea limite per quel valore. Ecco come lo fai:

Linea LimitLine = nuova LimitLine (10f); data.addLimitLine (line);

8. Salvataggio del grafico come immagine

MPAndroidChart consente inoltre di salvare lo stato corrente di un grafico come un'immagine. Per utilizzare questa funzione, devi prima dare alla tua app il permesso di scrivere sulla scheda SD del dispositivo. Puoi farlo aggiungendo il seguente codice al tuo AndroidManifest.xml:

Hai due metodi tra cui scegliere:

salva nella galleria Questo metodo salva il grafico come file JPEG. Consente inoltre di specificare la qualità o il rapporto di compressione dell'immagine.
saveToPath Questo metodo salva il grafico come file PNG nel percorso specificato.

Ad esempio, per salvare il grafico come file JPEG, è possibile utilizzare il seguente frammento di codice:

chart.saveToGallery ("mychart.jpg", 85); // 85 è la qualità dell'immagine

Conclusione

In questo tutorial, hai imparato come utilizzare la libreria MPAndroidChart per creare grafici che siano sia gradevoli che interattivi. Per motivi di coerenza, ho utilizzato i grafici a barre in questo tutorial. Tuttavia, è possibile seguire la stessa procedura per creare altri tipi di grafici. Per saperne di più su questa libreria, ti incoraggio a leggere la documentazione e gli esempi su Github.

Codice