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

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

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

- 92 - КПРФ;

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

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

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

Итак, приступим. Сперва создадим класс 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;
		}
	}
}

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