Флеш-диаграммы на ActionScript 3.0

Сегодня познакомимся с библиотекой классов для создания диаграмм от laosafu (библиотека прилагается к исходнику, ссылка на который в конце поста). Для примера мы создадим диаграмму, иллюстрирующую распределение мест между партиями в Государственной Думе Российской Федерации по итогам фальсифицированных выборов, прошедших в декабре 2011 года. А итоги объявлены следующими:

- 238 мест - «Единая Россия»;

- 92 - КПРФ;

- 64 мест - «Справедливая Россия»;

- 56 мест - ЛДПР.

В результате у нас должна получиться примерно такая диаграмма:

Загрузить Adobe Flash Player

Итак, приступим. Сперва создадим класс Diagram, который и будет генерировать нашу диаграмму (смотри комментарии к коду).

Код ActionScript 3.0:

package com.laosafu { import flash.display.Sprite; /* главный класс, отвечающий за построение диаграмм */ import com.laosafu.chart.CircleChart; /* данный класс автор использует для генерации случайной градиентной заливки */ import org.aswing.ASColor; /* тело класса */ public class Diagram extends Sprite { /* массив радиусов диаграммы */ private var radius:Array = [150]; /* массив значений, на основе которых будет строиться диаграмма */ private var stat:Array = [238,92,64,56]; /* функция конструктор */ public function Diagram() { /* создание диаграммы */ var circleChart:CircleChart = createChart(radius,stat); /* позиционирование диаграммы на сцене флеш-ролика */ circleChart.x = 275; circleChart.y = 200; /* добавление диаграммы в список отображения */ addChild(circleChart); } /* функция, генерирующая диаграмму */ private function createChart(radius:Array, stat:Array):CircleChart { var circleChart:CircleChart = new CircleChart(); circleChart.radius = radius; circleChart.chartData.data = stat; var len:uint = circleChart.chartData.data.length; circleChart.init(); /* bevelMode - это свойство, отвечающее за наличие(true) или отсутствие(false) эффекта вдавливания у диаграммы */ circleChart.bevelMode = true; /* в цикле закрашиваются сектора диаграммы случайной градиентной заливкой */ for (var i:uint = 0; i < len; i++) { var color:ASColor = new ASColor(Math.round((Math.random() * 0xFFFFFF))); circleChart.fillColor([color,color.darker(0.7)], i); } circleChart.draw(); return circleChart; } } }

Теперь подключим наш класс Diagram к флеш-проекту.

Код ActionScript 3.0:

/* импортируем класс */ import com.laosafu.Diagram; /* создаём экземпляр класса */ var d:Diagram = new Diagram(); /* размещаем на сцене флеш-ролика */ addChild(d);

По моему скромному мнению, получилось довольно симпатично. Но один момент меня всё же не устраивает - случайные цвета. Давайте переделаем наш класс Diagram так, чтобы сектора окрашивались в традиционные партийные цвета.

Код ActionScript 3.0:

package com.laosafu { import flash.display.Sprite; /* главный класс, отвечающий за построение диаграмм */ import com.laosafu.chart.CircleChart; /* данный класс автор использует для генерации случайной градиентной заливки */ import org.aswing.ASColor; /* тело класса */ public class Diagram extends Sprite { /* массив радиусов диаграммы */ private var radius:Array = [150]; /* массив значений, на основе которых будет строиться диаграмма */ private var stat:Array = [238,92,64,56]; /* массив цветов, которые будут использоваться для окрашивания диаграммы */ private var colors:Array = [0x000ff,0xff0000,0xffcc00,0x0099cc]; /* функция конструктор */ public function Diagram() { /* создание диаграммы */ var circleChart:CircleChart = createChart(radius,stat,colors); /* позиционирование диаграммы на сцене флеш-ролика */ circleChart.x = 275; circleChart.y = 200; /* добавление диаграммы в список отображения */ addChild(circleChart); } /* функция, генерирующая диаграмму */ private function createChart(radius:Array, stat:Array, colors:Array):CircleChart { var circleChart:CircleChart = new CircleChart(); circleChart.radius = radius; circleChart.chartData.data = stat; var len:uint = circleChart.chartData.data.length; circleChart.init(); /* bevelMode - это свойство, отвечающее за наличие(true) или отсутствие(false) эффекта вдавливания у диаграммы */ circleChart.bevelMode = true; /* в цикле закрашиваются сектора диаграммы случайной градиентной заливкой */ for (var i:uint = 0; i < len; i++) { var color:ASColor = new ASColor(colors[i]); circleChart.fillColor([color,color.darker(0.7)], i); } circleChart.draw(); return circleChart; } } }

Теперь мы получим следующую диаграмму:

Загрузить Adobe Flash Player

Исходник к данному уроку под Adobe Flash CS5.5 и саму библиотеку классов скачать можно здесь.

Автор: admin

Дата добавления: 2011-12-12

Просмотров: 2680

Рейтинг поста: +5-

Правила перепечатки

Социальные закладки:
Комментарии:
К данной заметке комментариев пока нет. Ваш комментарий может стать первым.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика