Для сайта «Русского Международного Банка» требовалось изготовить две разновидности графиков, наглядно отображающих экономические показатели банка. Графики должны строиться динамически, исходя из переданных данных и гармонично вписываться в дизайн сайта, используя специальную палитру, которую подготовил дизайнер.

Мне показалось более интересным рассказать про создание «пирога» — он посложнее в программировании, но, в то же время, более красивый, чем стандартная гистограмма. Часть функциональности я убрал из исходника, чтобы не отвлекаться от темы. В статье кратко описана теория, а исходный текст программы вы сможете посмотреть в прикрепленном к статье файле, исходники отлично прокомментированы.

В основе графика лежит прототип Ивана Дембицкого, который позволяет рисовать сектора и овалы. Не было смысла писать подобную функцию и изобретать велосипед, да и время на программирование было ограничено. Функция имеет следующие параметры: радиус по горизонтали, радиус по вертикали, позиция по горизонтали, позиция по вертикали, детализация (для отрисовки), начальный и конечный углы сектора.

Итак, на входе мы имеем набор величин, которые необходимо отобразить как сектора «пирога», и задать каждому сектору определенный цвет. Эти данные мы будем передавать в функцию рисования графика в виде массива объектов, свойствами которых будет числовое значение и цвет. Для начала нам требуется посчитать процентное значение каждого сектора — это очень просто. Сложив числовые значения всех объектов массива, мы получим общую сумму, которую можно поделить на значение и получить процент. А также получить величину сектора «пирога». Нам также необходимо отсортировать объекты по значению с помошью стандартного метода массива: Values.sortOn("value";, Array.DESCENDING | Array.NUMERIC). Далее можно приступать к рисованию.

Заранее подготовим пустой муви-клип для отображения тени под графиком и зададим ему фильтр размытия (mcShadow.filters = new Array (new flash.filters.BlurFilter(8,8)), прозрачность (40%) и сместим его ниже тела графика на несколько десятков пикселей.

Теперь в цикле переберем все объекты массива и для каждого сделаем следующие действия:

• Получим позицию центра сектора с помошью функций косинуса и синуса. Это требуется для того чтобы секторы немного отступали от центра и улучшали читабельность графика.
• Сделаем дубликат муви-клипа с текстовым полем, куда будем вписывать процентные значения секторов. Конечно можно создавать текстовое поле программно, но обычно это не очень удобно, так как должны сохраняться элементы дизайна и т. п.
• Создадим пустой муви-клип для программного рисования сектора внутри него. Можно нарисовать все в один клип, но тогда мы лишимся возможности получать события при наведении мышки.
• С помощью функции рисования секторов и овалов рисуем каждый сектор в муви-клип. Радиус, координаты и углы сектора нам уже известны. Чтобы создать объем, можно математически рассчитать видимую часть будущего цилиндра, но мы пойдем простым путем и сэкономим время разработки — просто отрисуем последовательно несколько одинаковых секторов (в исходнике кол-во равно двадцати), увеличивая для каждого координату по вертикали.
• На каждый полученный клип можно подключить функции обработки событий, чтобы сделать график интерактивным.
• Обязательно отрисуем тот же сектор в муви-клип, предназначенный для тени.

Вот и все, мы получили красивый и объемный график.

Нажмите на график для создания «нового».

Скачать исходный файл.
(Около 15 килобайт)

Автор записи: Михаил Востриков