Dodawanie wykresów do aplikacji przy użyciu MPAndroidChart

Jeśli Twoja aplikacja operuje na dużej ilości danych, użycie wykresów, zamiast tabel do wyświetlania danych może skutkować znacznie lepszym odbiorem przez użytkownika. W tym poradniku dowiesz się o popularnej bibliotece open source, MPAndroidChart, przeznaczonej do wyświetlania wykresów. Wykresy tej biblioteki są wysoce konfigurowalne, interaktywne i łatwe w tworzeniu.

Wstępne wymagania

Upewnij się, że posiadasz najnowszą wersję Android Studio. Możesz je pobrać z Android Developer website.

1. Dodawanie MPAndroidChart do Projektu

Wszystko co musisz zrobić, aby skorzystać z biblioteki w swoim projekcie to:

1. Pobrać najnowszą wersję biblioteki z serwisu Github. Podczas pisania tego poradnika, najnowszą wersją była wersja 1.7.4.
2. Skopiować mpandroidchartlibrary-1-7-4.jar do katalogu libs w swoim projekcie.
3. W Android Studio, kliknąć prawym przyciskiem myszy na pliku JAR i wybrać Add as library.
   

2. Tworzenie DataSet

Wszystkie dane powinny być zamienione na obiekt DataSet, aby mogły być użyte przez wykres. Różne typy wykresów korzystają z różnych podklas klasy DataSet. Na przykład BarChart używa BarDataSet. Podobnie PieChart używa PieDataSet.

Zamiast tworzyć wykres z losowych danych, rozważmy bardziej prawdopodobny przypadek. Alice i Bob są przyjaciółmi. Alice dzwoni do Boba kilka razy w miesiącu aby dowiedzieć się co u niego słychać. Bob notuje, kiedy ona do niego dzwoni.

W tym poradniku użyjemy notatek Boba do stworzenia wykresu, aby zobrazować ile razy Alice dzwoniła do Boba. Oto co zanotował Bob:

Wykres słupkowy wydaje się być idealny do tego typu danych. Aby wyświetlić dane na wykresie, musimy stworzyć instancję BarDataSet. Możesz wykonać te same kroki, aby utworzyć instancje innych podklas DataSet.

Każda pojedyncza wartość surowych danych powinna być reprezentowana przez Entry. ArrayList złożona z obiektów Entry jest używana do stworzenia DataSet. Stwórzmy kilka obiektów BarEntry  i dodajmy je do ArrayList:

1

ArrayList<BarEntry> entries = new ArrayList<>();

2

entries.add(new BarEntry(4f, 0));

3

entries.add(new BarEntry(8f, 1));

4

entries.add(new BarEntry(6f, 2));

5

entries.add(new BarEntry(12f, 3));

6

entries.add(new BarEntry(18f, 4));

7

entries.add(new BarEntry(9f, 5));

Teraz ArrayList złożona z obiektów Entry jest gotowa, możemy z tego stworzyć DataSet:

1

BarDataSet dataset = new BarDataSet(entries, "# of Calls");

3. Definiowanie etykiety osi X

Dodaliśmy już kilka wartości do naszego wykresu, natomiast nie mają one większego sensu dla użytkownika, chyba, że oznaczymy je przy pomocy etykiet. Każda etykieta osi X jest reprezentowana przez String, natomiast ArrayList jest wykorzystywana do zapamiętania tych wszystkich etykiet.

1

ArrayList<String> labels = new ArrayList<String>();

2

labels.add("January"); 

3

labels.add("February"); 

4

labels.add("March"); 

5

labels.add("April"); 

6

labels.add("May");

7

labels.add("June");

4. Tworzenie wykresu

Wszystkie wykresy tej biblioteki są podklasami ViewGroup, co znaczy, że możesz łatwo dodawać je do dowolnego layoutu. Możesz zdefiniować swój wykres używając pliku XML lub kodu w Javie. Jeśli wykres ma zająć cały ekran Activity lub Fragment, wtedy użycie kodu Javy jest prostsze:

1

BarChart chart = new BarChart(context);

2

setContentView(chart);

Tworzy to czysty wykres bez danych. Użyjmy zestawu danych i listy etykiet, które stworzyliśmy w poprzednim kroku do zdefiniowania danych dla wykresu.

1

BarData data = new BarData(labels, dataset);

2

chart.setData(data);

Do wykresu dodajmy również opis.

1

chart.setDescription("# of times Alice called Bob");

Jeśli uruchomisz teraz aplikację na urządzeniu z Androidem, powinieneś być w stanie zobaczyć wykres słupkowy, który wygląda podobnie do tego zaprezentowanego poniżej. Wykres jest interaktywny, odpowiada na pinch-to-zoom i gesty przesuwania.

5. Korzystanie z szablonów kolorów

Jeśli nie podobają Ci się domyślne kolory, możesz użyć metody setColors z klasy DataSet, aby zmienić układ kolorów. Co więcej, MPAndroidChart przychodzi z szeregiem wstępnie zdefiniowanych szablonów kolorów, które pozwalają zmienić wygląd zestawu danych, nie mając do czynienia z wartościami poszczególnych kolorów.

W obecnej wersji biblioteki, dostępne są następujące szablony:

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

Do skojarzenia szablonu koloru z zestawem danych, musisz użyć metody setColors. Oto przykład:

1

dataset.setColors(ColorTemplate.COLORFUL_COLORS);

Uruchom aplikację raz jeszcze, aby zobaczyć wykres z żywszymi kolorami.

6. Dodawanie animacji

Wszystkie wykresy tej biblioteki wspierają animacje, które możesz użyć do ożywienia wykresów Metoda animateXY jest używana do animacji obu osi wykresu. Jeśli chcesz animować tylko jedną oś, możesz użyć animateX albo animateY, do animacji osi X lub Y. Możesz określić długość trwania (w milisekundach) animacji, kiedy wywołujesz metodę. Na przykład, do animacji jedynie osi Y, dodaj następujący kod:

1

chart.animateY(5000);

7. Używanie linii granicznych

Możesz dodać linię graniczną do wykresu, aby nadać wykresowi większego sensu. Linie graniczne mają sens tylko w szczególnych typach wykresów, takich jak wykres słupkowy, liniowy i rozrzutu.

W naszym przykładzie, gdzie Alice dzwoni do Boba kilka razy w miesiącu, powiedzmy, że Bob zirytuje się, jeśli Alice zadzwoni do niego więcej niż dziesięć razy w ciągu jednego miesiąca. Aby pokazać tą informację, powinniśmy dodać linię graniczną dla takiej wartości. Oto, jak to zrobić:

1

LimitLine line = new LimitLine(10f);

2

data.addLimitLine(line);

8. Zapisywanie wykresu jako obrazu

MPAndroidChart umożliwia zapis obecnego stanu wykresu do obrazu. Aby skorzystać z tej własności, potrzebujesz najpierw przyznać aplikacji prawa dostępu do zapisu na karcie SD urządzenia. Możesz zrobić to poprzez dodanie następującego kodu do AndroidManifest.xml:

1

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Masz do wyboru dwie metody:

• saveToGallery Ta metoda zapisuje wykres jako plik JPEG. Umożliwia Ci również określenie współczynnika jakości kompresji obrazu.
• saveToPath Ta metoda zapisuje wykres do pliku PNG w określonej ścieżce.
  

Na przykład, aby zapisać wykres do pliku JPEG powinieneś skorzystać z następującego kodu:

1

chart.saveToGallery("mychart.jpg", 85); // 85 is the quality of the image

Podsumowanie

W tym poradniku nauczyłeś się jak używać biblioteki MPAndroidChart do tworzenia wykresów, które są jednocześnie przyjemne i interaktywne. Ze względu na formę, użyłem wykresu słupkowego w tym poradniku. Niemniej, podążając tymi samymi krokami, możesz utworzyć wykresy innych typów. Aby dowiedzieć się więcej o tej bibliotece, zachęcam Cię do przeczytania dokumentacji i przykładów w serwisie Github.