Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)
Если ваше приложение имеет дело с большим количеством данных, использование диаграмм вместо таблиц для отображения этих данных может привести к значительному улучшению для удобства пользователей. В этом уроке вы узнаете о популярной библиотеке для построения графиков с открытым исходным кодом - MPAndroidChart. Графики этой библиотеки очень настраиваемые, интерактивные и легко создаваемые.
Предпосылки
Убедитесь, что установлена последняя версия Android Studio. Вы можете получить его с веб-сайта разработчика Android.
1. Добавление MPAndroidChart в проект
Чтобы использовать эту библиотеку в своем проекте Android, вам нужно всего лишь:
- Загрузите последнюю версию библиотеки из Github. На момент написания последней версии была 1.7.4.
- Скопируйте файл mpandroidchartlibrary-1-7-4.jar в каталог libs вашего проекта.
- В Android Studio щелкните правой кнопкой мыши файл JAR и выберите Добавить как библиотеку.
2. Создание DataSet
Все данные должны быть преобразованы в объект DataSet
, прежде чем он может использоваться диаграммой. Различные типы диаграмм используют разные подклассы класса DataSet
. Например, BarChart
использует экземпляр BarDataSet
. Аналогично, PieChart
использует экземпляр PieDataSet
.
Вместо того, чтобы просто иметь дело со случайными числами для создания образца диаграммы, давайте рассмотрим гипотетический сценарий. Алиса и Боб - друзья. Алиса звонит Бобу несколько раз в месяц, чтобы узнать, что он делает. Боб делает заметку, когда она называет его.
В этом уроке мы используем примечания Боба для создания диаграммы, чтобы показать количество раз, когда Алиса звонила Бобу. Вот что записал Боб:
Месяц | Количество звонков |
---|---|
январь | 4 |
февраль | 8 |
март | 6 |
апрель | 12 |
май | 18 |
июнь | 9 |
Гистограмма кажется идеальной для данных такого типа. Чтобы отобразить данные на диаграмме, нам нужно создать экземпляр 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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post