Встала передо мной задача — нарисовать график полета ракеты на телефоне. Обратился в интернет за примером и обнаружил, что такую задачу обычно решают с помощью инструментов от Google. Это показалось странным, т.к. в AI есть свой инструмент «Charts». Удивительно, но на  текущий момент почти нет примеров его использования. Пришлось обращаться к первоисточнику. Ниже — «моя интерпретация» приводимого там примера.

Сразу — ссылка на «первоисточник». В нем я рассмотрю первый (самый простой) пример построения графиков и прочих «картинок» — прямая ссылка на него. Там есть «каркасный код» и подробная (с картинками) инструкция как его довести до ума. Собственно по инструкции я и действовал.

Сначала общая идеология:

• Для «рисования графика» сначала размещаем на экране компонент «Chart»
• Затем в него помещаем объект «ChartData2D»
• Определяем в этих компонентах основные параметры отображения будущего графика (тип, цвет и проч.)
• Затем занимаемся кодом. Понадобится какая-то инициализирующая процедура (например, сбросить координаты, очистить поле) и процедура, «прорисовывающая» данные какого-нибудь массива.
• Подготавливая массив (список) данных и вызывая созданные процедуры, мы получаем отображение данных в графике.

В примере (я его специально немного изменил, относительно «прообраза») на линейный график выводятся пять точек. По вертикальной оси можно менять значения для трех из них, для этого есть три кнопки. По нажатию кнопок происходит прирост значения на единицу. Отдельная кнопка для сброса в ноль всех показаний.

Размещаем на экране компонент «Chart»

Затем в него помещаем объект «ChartData2D»

Переходим в блоки и создаем необходимые процедуры.

Процедура с названием «процедура» самая интересная, занимается «прорисовкой данных» на графике. Как видно сначала картинка очищается от имеющихся данных. Затем, данные, которые надо отобразить на графике импортируются из списка. В данном примере список создается прямо в процедуре. Видно, что записи основного списка составлены из самостоятельных списков с парой записей X, Y.

Ниже показаны обработчики нажатия кнопок. Идет приращение глобальных переменных и вызывается процедура прорисовки графика. По кнопке сброс переменные сбрасываются в ноль.

В итоге, нажимая кнопки можно нарисовать, например, такой график.Конечно, тут рассмотрены только самый минимум параметров компонент Charts. Остальное можно посмотреть по вышеуказанной ссылке.

Файл «проекта» 🙂 — можно скачать тут MoodTrackerApakhom