Если ваше приложение имеет дело с большим количеством данных, использование диаграмм вместо таблиц для отображения этих данных может привести к значительному улучшению для удобства пользователей. В этом уроке вы узнаете о популярной библиотеке для построения графиков с открытым исходным кодом - MPAndroidChart. Графики этой библиотеки очень настраиваемые, интерактивные и легко создаваемые.

Предпосылки

Убедитесь, что установлена последняя версия Android Studio. Вы можете получить его с веб-сайта разработчика Android.

1. Добавление MPAndroidChart в проект

Чтобы использовать эту библиотеку в своем проекте Android, вам нужно всего лишь:

1. Загрузите последнюю версию библиотеки из Github. На момент написания последней версии была 1.7.4.
2. Скопируйте файл mpandroidchartlibrary-1-7-4.jar в каталог libs вашего проекта.
3. В Android Studio щелкните правой кнопкой мыши файл JAR и выберите Добавить как библиотеку.
   

2. Создание DataSet

Все данные должны быть преобразованы в объект DataSet, прежде чем он может использоваться диаграммой. Различные типы диаграмм используют разные подклассы класса DataSet. Например, BarChart использует экземпляр BarDataSet. Аналогично, PieChart использует экземпляр PieDataSet.

Вместо того, чтобы просто иметь дело со случайными числами для создания образца диаграммы, давайте рассмотрим гипотетический сценарий. Алиса и Боб - друзья. Алиса звонит Бобу несколько раз в месяц, чтобы узнать, что он делает. Боб делает заметку, когда она называет его.

В этом уроке мы используем примечания Боба для создания диаграммы, чтобы показать количество раз, когда Алиса звонила Бобу. Вот что записал Боб:

Гистограмма кажется идеальной для данных такого типа. Чтобы отобразить данные на диаграмме, нам нужно создать экземпляр BarDataSet. Вы можете выполнить те же действия для создания экземпляров других подклассов DataSet.

Каждое отдельное значение необработанных данных должно быть представлено как Entry. ArrayList таких объектов Entry используется для создания DataSet. Давайте создадим несколько объектов BarEntry и добавим их в ArrayList:

ArrayList<BarEntry> 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));

Теперь, когда объекты ArrayList из Entry готовы, мы можем создать DataSet:

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

3. Определение меток X-Axis

Мы уже добавили несколько значений в нашу диаграмму, но они не будут иметь большого смысла для пользователя, если мы не дадим им значимые метки. Каждая метка оси x представлена с использованием String, а ArrayList используется для хранения всех меток.

ArrayList<String> labels = new ArrayList<String>();
labels.add("January"); 
labels.add("February"); 
labels.add("March"); 
labels.add("April"); 
labels.add("May");
labels.add("June");

4. Создание графика

Все диаграммы этой библиотеки являются подклассами ViewGroup, что означает, что вы можете легко добавить их в любой макет. Вы можете определить свою диаграмму с помощью файла XML или кода Java. Если диаграмма займет весь экран Activity или Fragment, то проще всего использовать Java-код:

BarChart chart = new BarChart(context);
setContentView(chart);

Это создает пустой график без каких-либо данных. Давайте используем набор данных и список меток, которые мы создали на предыдущих шагах, чтобы определить данные этой диаграммы.

BarData data = new BarData(labels, dataset);
chart.setData(data);

Давайте также добавим описание к диаграмме.

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

Если вы сейчас запустите приложение на Android-устройстве, вы сможете увидеть гистограмму, похожую на ту, что показана ниже. Диаграмма интерактивна и реагирует на жесты сжимания и масштабирования.

5. Использование цветовых шаблонов

Если вам не нравятся цвета по умолчанию, вы можете использовать метод setColors класса DataSet для изменения цветовой схемы. Тем не менее, MPAndroidChart также поставляется с несколькими предопределенными цветовыми шаблонами, которые позволяют изменять внешний вид вашего набора данных без необходимости иметь дело с отдельными значениями цвета.

В текущей версии этой библиотеки доступны следующие шаблоны:

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

Чтобы связать шаблон цвета с набором данных, вам необходимо использовать метод setColors. Вот пример:

dataset.setColors(ColorTemplate.COLORFUL_COLORS);

Запустите приложение еще раз, чтобы увидеть график с более яркими цветами.

6. Добавление анимаций

Все диаграммы этой библиотеки поддерживают анимацию, которую вы можете использовать, чтобы сделать ваши диаграммы более живыми. Метод animateXY используется для анимации обеих осей диаграммы. Если вы хотите анимировать только одну из осей, вы можете использовать animateX или animateY для анимации оси x или оси y соответственно. Вы должны указать продолжительность (в миллисекундах) анимации при вызове этих методов. Например, чтобы анимировать ось y, добавьте следующий фрагмент кода:

chart.animateY(5000);

7. Использование ограничивающих линий

Вы можете добавить лимиты к диаграмме, чтобы добавить больше значений в ваши диаграммы. Лимитные линии имеют смысл только для определенных типов диаграмм, таких как гистограммы, линейные диаграммы и диаграммы рассеяния.

В нашем примере, где Алиса звонит Бобу несколько раз в месяц, скажем, что Боб раздражен, если Алиса звонит ему более десяти раз в месяц. Чтобы показать эту информацию, мы могли бы добавить лимитную линию для этого значения. Вот как вы это делаете:

LimitLine line = new LimitLine(10f);
data.addLimitLine(line);

8. Сохранение диаграммы как изображение

MPAndroidChart также позволяет сохранять текущее состояние диаграммы в качестве изображения. Чтобы использовать эту функцию, сначала необходимо предоставить своему приложению разрешение на запись на SD-карту устройства. Вы можете сделать это, добавив следующий код в ваш AndroidManifest.xml:

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

У вас есть два способа выбора:

• saveToGallery Этот метод сохраняет вашу диаграмму в виде файла JPEG. Он также позволяет указать качество или степень сжатия изображения.
• saveToPath Этот метод сохраняет вашу диаграмму в виде PNG-файла в указанном вами пути.
  

Например, чтобы сохранить диаграмму в виде файла JPEG, вы можете использовать следующий фрагмент кода:

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

Заключение

В этом уроке вы узнали, как использовать библиотеку MPAndroidChart для создания приятных и интерактивных графиков. Ради консистенции я использовал гистограммы во всем этом уроке. Тем не менее, вы можете выполнить те же шаги для создания других типов диаграмм. Чтобы узнать больше об этой библиотеке, я рекомендую вам ознакомиться с документацией и примерами в Github.