Гистограмма или гистограмма — это диаграмма с прямоугольными столбцами, длина которых пропорциональна значениям, которые они представляют. Они обычно используются для сравнения двух или более значений, которые были взяты во времени или при различных условиях, обычно в небольших наборах данных.
В этом уроке мы создадим генератор гистограмм с использованием XML и AS3.
Шаг 1: Краткий обзор
Используя ActionScript 3, мы получим необходимые данные графика из файла XML, а затем отобразим преобразованные данные в виде анимированных полос и информационной области.
Шаг 2: Начало
Откройте Flash и создайте новый файл Flash (ActionScript 3).
Установите размер сцены 600×300 и добавьте серый радиальный фон (# E6E6E6, #CCCCCC).
Наш генератор графиков будет создан полностью с помощью кода, так что это будет единственное, что вы будете делать в рабочей области.
Шаг 3: XML
Откройте ваш любимый XML-редактор (любой текстовый редактор будет работать) и добавьте следующие строки:
|
1
2
3
4
5
6
7
|
<?xml version=»1.0″?>
<graphs width=»50″>
<graph name=»Yellow» value=»50″ color=»0xFDC13E»/>
<graph name=»Blue» value=»80″ color=»0x25B7E2″/>
<graph name=»Green» value=»30″ color=»0xB8CF36″/>
<graph name=»Red» value=»10″ color=»0xE7473F»/>
</graphs>
|
Это XML, который мы будем использовать для получения данных, мы будем использовать не имена детей, а атрибуты.
- ширина : ширина каждого бара.
- name : имя элемента, отображаемого в информационной области.
- значение : значение этого элемента, отображаемое в верхней части столбцов.
- color : цвет бара в шестнадцатеричном формате.
Это файл, который конечный пользователь должен будет отредактировать, чтобы показать свои собственные данные.
Шаг 4: ActionScript!
Это время ActionScript.
Создайте новый файл ActionScript (Cmd + N) и сохраните его как «Graph.as» в каталоге классов.
Шаг 5: Пакет
|
1
2
|
package
{
|
Ключевое слово package позволяет вам организовать ваш код в группы, которые могут быть импортированы другими скриптами. Рекомендуется называть их, начиная с буквы нижнего регистра, и использовать межстрочные буквы для следующих слов, например: myClasses .
В этом примере класс хранится в том же месте, что и файл Fla.
Шаг 6: Импорт необходимых классов
Это обязательные классы, более подробное описание каждого класса см. В справке Flash (F1).
|
1
2
3
4
5
6
7
8
9
|
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
|
Шаг 7: Объявление и расширение класса
Ключевое слово extends определяет класс, который является подклассом другого класса. Подкласс наследует все методы, свойства и функции, так что мы можем использовать их в нашем классе.
|
1
2
|
public class Graph extends Sprite
{
|
В этом примере класс Graph наследует все методы и свойства класса Sprite.
Шаг 8: Переменные
Это переменные, которые мы будем использовать, объяснено в комментариях.
|
1
2
3
4
5
6
7
|
private var graphContainer:Sprite = new Sprite();
private var xmlFile:XML;
private var urlLoader:URLLoader = new URLLoader();
private var totalBars:int;
private var tween:Tween;
private var tf:TextFormat = new TextFormat();
|
Шаг 9: Конструктор
Конструктор — это функция, которая запускается, когда объект создается из класса. Этот код выполняется первым, когда вы создаете экземпляр объекта или выполняете с использованием класса документа.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
public function Graph():void
{
/* Text Format */
tf.color = 0x666666;
tf.size = 12;
tf.font = «Helvetica»;
createGraphContainer();
loadXML();
createBars();
}
|
Шаг 10: Контейнер графика
Эта функция создаст линии осей x и y графика, используя API рисования.
|
1
2
3
4
5
6
7
8
9
|
private function createGraphContainer():void
{
graphContainer.graphics.lineStyle(1, 0x9C9C9E);
graphContainer.graphics.moveTo(30, 30);
graphContainer.graphics.lineTo(30, 270);
graphContainer.graphics.lineTo(570, 270);
addChild(graphContainer);
}
|
Шаг 11: загрузить функцию XML
Это функция, которая обрабатывает загрузку файла XML. Мы указываем параметр по умолчанию, чтобы избежать вызова функции с использованием другого файла .as, вместо этого мы будем вызывать его из класса документа.
|
1
2
3
4
5
|
private function loadXML(file:String = «graph.xml»):void //Your xml data file
{
urlLoader.load(new URLRequest(file));
urlLoader.addEventListener(Event.COMPLETE, parseXML);
}
|
Шаг 12: Разбор XML
Эта функция устанавливает данные, загруженные в объект XML, и вызывает функции для создания графика с использованием этих данных.
|
1
2
3
4
5
6
7
8
|
private function parseXML(e:Event):void
{
xmlFile = new XML(e.target.data);
totalBars = xmlFile.children().length();
createBars();
displayNames();
}
|
Шаг 13: Создание баров
Этот код обрабатывает создание панели.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
private function createBars():void
{
for (var i:int = 0; i < totalBars; i++)//This for checks the number of bars in the xml
{
var bar:Sprite = new Sprite();
bar.graphics.beginFill(xmlFile.children()[i].@color);
bar.graphics.drawRect(0, 0, xmlFile.@width, xmlFile.children()[i].@value);
bar.graphics.endFill();
bar.x = 40 + (xmlFile.@width * i) + (10*i);
bar.y = 270 — bar.height;
var val:TextField = new TextField();
val.defaultTextFormat = tf;
val.autoSize = TextFieldAutoSize.RIGHT;
val.text = xmlFile.children()[i].
val.x = 55 + (xmlFile.@width * i) + (10*i);
val.y = 255 — bar.height;
tween = new Tween(bar,»height»,Strong.easeOut,0,bar.height,1,true);
addChild(bar);
addChild(val);
}
}
|
Шаг 14: Область информации
Информация о графике будет отображаться в правом верхнем углу, эта функция позаботится об этом.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
private function displayNames():void
{
for (var i:int = 0; i < totalBars; i++)
{
var color:Sprite = new Sprite();
var names:TextField = new TextField();
names.defaultTextFormat = tf;
names.autoSize = TextFieldAutoSize.LEFT;
names.text = xmlFile.children()[i].
/* Position */
names.x = 500;
names.y = 30 + (20 * i);
/* Color squares */
color.graphics.beginFill(xmlFile.children()[i].@color);
color.graphics.drawRect(0, 0, 10, 10);
color.graphics.endFill();
color.x = 490;
color.y = 31 + (20 * i);
addChild(names);
addChild(color);
}
}
|
Шаг 15: Класс документа
Вернитесь к файлу .Fla и в панели свойств добавьте «График» в поле «Класс», чтобы сделать этот класс документа.
Вывод
Протестируйте свой фильм и увидите, что ваш график появился на сцене.
Вы можете настраивать графики различными способами, используя файл XML, а также добавляя новые функции с помощью ActionScript. Попытайся!
Надеюсь, вам понравился этот урок, спасибо за чтение.