Tutorial for using AnyChart in your FlashActionScript3.0 projects

If you want to use AnyChart with AS3 you can start with downloading the following sample package:

Сцылко

These are samples of AnyChart Flash Charts usage with AS3, please download the zip file, unpack it and follow the instructions in readme.txt

Introduction

Это не нейтивный Flash компонент, он просто подгружает AnyChart.swf из вне.

Как использовать

Давайте рассмотрим как добавить граффик в ваше приложение. Создайте файл с расширением .fla и назовите, например "FirstChart.fla". Распакуйте содержимое архива в папку содержащую данный файл.

Вы должны получить примерно такую файловую структуру:

В первом фрейме пропишите следующий код:

import com.anychart.flash9.AnyChart;
import flash.display.StageScaleMode;
import flash.display.StageAlign;

AnyChart.loadEngine();

this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;

var chart:AnyChart = new AnyChart();
chart.chartWidth=400;
chart.chartHeight=300;

this.addChild(chart);

Вот что должно у вас получиться:

Результат вы можете увидеть по этой ссылке: SimpleChart

Добавление данных в график

Что бы ваш график начал отображать какие либо данные, необходимо отдать ему XML файл или XML строку на обработку, сделать это можно при помощи методов setXMLFile или setXMLData соответственно.

Вам необходимо дополнить код следующими строчками:

chart.addEventListener(EngineEvent.ANYCHART_CREATE, onEngineCreate);
function generateData():XML {
var res:XML = <anychart>
<charts>
<chart>
<data>
<series name="series1">
</series>
</data>
</chart>
</charts>
</anychart>;
for (var i:int = 0;i<10;i++) {
res.charts[0].chart[0].data[0].series[0].point += <point name={"Pt"+i.toString()} y={Math.random()*100} />;
}
return res;
};

function onEngineCreate(e:EngineEvent):void {chart.setXMLData(generateData());}

Результат вы можете увидеть по следующей ссылке: SimpleChartWithData

Multiple Charts

Так же вы можете отобразить несколько графиков одновременно, для этого вам нужно добавить объявление этого графика и отдать ему XML данные на исполнение:

var chart2:AnyChart = new AnyChart();
chart2.x = 410;
chart2.chartWidth = 400;
chart2.chartHeight = 300;
chart.addEventListener(EngineEvent.ANYCHART_CREATE, onEngineCreate);
function generateData():XML {
var res:XML = <anychart>
<charts>
<chart>
<data>
<series name="series1">
</series>
</data>
</chart>
</charts>
</anychart>;
for (var i:int = 0;i<10;i++) {
res.charts[0].chart[0].data[0].series[0].point += <point name={"Pt"+i.toString()} y={Math.random()*100} />;
}
return res;
};

function onEngineCreate(e:EngineEvent):void {
chart.setXMLData(generateData());
chart2.setXMLData(generateData());
}

Результат:MultipleCharts

Работа с событиями

Для работы с событиями AnyChart.swf вам необходимо добавить строчку :

import com.anychart.flash9.events.AnyChartPointEvent;

Вы можете работать со следующими событиями:

Для того что бы перехватить событие вам необходимо повесить на чарт слушатель и назначить обработчик. Это можно сделать следующим образом:

chart.addEventListener(AnyChartPointEvent.MOUSE_OVER, onMouseOver);

function onMouseOver(event:AnyChartPointEvent){
trace ("Mouse Over");
}

Работу с несколькими событиями можно посмотреть в следующем примере: Events Sample

Gauges and Gages Events

Работать с Gages ни чуть не сложенее чем с обычными графиками, вам просто необдимо отдать на обработку XML файл содержищий описание Gages. При ра боте с Gages вы можете данамически обновлять его значение или цвет стрелк для этого вам необходимо выполнять команды updatePointerData(gaugeName:String, pointerName:String, pointerValue:Number) и updatePointerColor(gaugeName:String, pointerName:String, pointerColor:String) соответственно.

Давайте рассмотрим пример когда ленейному Gage по таймеру отдается случайное значение:

import com.anychart.flash9.AnyChart;
import com.anychart.flash9.events.EngineEvent;
import flash.display.StageScaleMode;
import flash.display.StageAlign;

this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;

var chart:AnyChart = new AnyChart();
chart.chartWidth=400;
chart.chartHeight=300;

chart.setXMLData(generateData());
chart.addEventListener(EngineEvent.ANYCHART_CREATE,setXML);

function setXML(e:Event):void {
chart.setXMLData(generateData());
}

function updateData(e:Event):void {
var value:Number = Math.random()*100;
chart.updatePointerData("linearGauge","firstValue",value);
}

var timer:Timer = new Timer(10000);
timer.delay = 1000;

timer.start();
timer.addEventListener(TimerEvent.TIMER,updateData);

function generateData():XML{
var res:XML = <anychart>
<gauges>
<gauge>
<chart_settings>
<title enabled="false"/>
<chart_background enabled="false"/>
</chart_settings>
<linear name="linearGauge" orientation="Horizontal">
<axis size="15" position="60">
<scale_bar>
<effects enabled="false"/>
</scale_bar>
<color_ranges>
<color_range start="70" end="100" align="Outside" padding="2" start_size="0" end_size="10">
<fill type="Gradient">
<gradient angle="0">
<key color="Green"/>
<key color="Yellow"/>
<key color="Red"/>
</gradient>
</fill>
</color_range>
</color_ranges>
<labels>
<format>{"{%Value}{numDecimals:0}%"}</format>
</labels>
</axis>
<frame enabled="true" type="Rectangular">
<corners type="Rounded" all="5"/>
<outer_stroke enabled="true" thickness="3">
<fill type="Gradient">
<gradient>
<key color="#FEFEFE"/>
<key color="#CECECE"/>
</gradient>
</fill>
<border enabled="true" color="Black" opacity="0.1"/>
</outer_stroke>
<inner_stroke enabled="false"/>
<background>
<fill type="Solid" color="White">
<gradient>
<key position="0" color="#FFFFFF"/>
<key position="0.3" color="#EEEEEE"/>
<key position="1" color="#FEFEFE"/>
</gradient>
</fill>
<border enabled="false" type="Gradient" thickness="6"/>
<effects enabled="true">
<inner_shadow enabled="true" distance="3" opacity="0.2"/>
</effects>
</background>
<effects enabled="true">
<drop_shadow enabled="true" distance="1" opacity="0.3"/>
</effects>
</frame>
<pointers>
<pointer name="firstValue" type="Bar" value="45" color="CornflowerBlue">
<bar_pointer_style width="%AxisSize*0.7">
<border enabled="true" type="Solid" color="DarkColor(%Color)"/>
<effects enabled="true">
<bevel enabled="true" distance="2" highlight_opacity="0.3" shadow_opacity="0.3"/>
</effects>
</bar_pointer_style>
</pointer>
</pointers>
</linear>
</gauge>
</gauges>
</anychart>;

return res;
}

this.addChild(chart);

AnyChart.loadEngine();

После компиляции и обработки мы получим следующий результат: Gauges Sample with dynamic data update

При использовании Gauges вы можете слушать событие Изменения значения Gauge. Для этого вам необходимо добавить строчки:

import com.anychart.flash9.events.ValueChangeEvent;

chart.addEventListener(ValueChangeEvent.VALUE_CHANGE,getValue);

function getValue(e:ValueChangeEvent):void {
var value:Number = Math.ceil(e.params.pointerValue);
trace (value.toString());
}

Пример использования можно посмотреть тут:Gauges Sample with ValueChangeEvent

Using Maps

Если вы хотите отобразить карту, вы должны положить папку "maps" с содержащейся в ней картой рядом с AnyChart.swf и проделать обычные манипуляции с XML файлом, который вы загружаете, или с обычными XML данными.Пример :

import com.anychart.flash9.AnyChart;
import com.anychart.flash9.events.EngineEvent;
import flash.display.StageScaleMode;
import flash.display.StageAlign;

this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;

var chart:AnyChart = new AnyChart();
chart.chartWidth=1000;
chart.chartHeight=800;
chart.enableXMLCache();
chart.setXMLFile("./anychart.xml");
this.addChild(chart);

AnyChart.loadEngine();

Результат исполнения данного примера:Map Sample

Заключение

Дорогие кастомеры, надеюсь вым пригодится данный туториал. Исходные коды всех примеров вы можете посмотреть в файлах с раширением ".flа". Исходый код каждого примера находится в папке с этим примером. Наслаждайтесь использованием AnyChart. При возникновении проблем пишите в support, наша техническая поддержка ответит на любые ваши вопросы и учтет предложения и пожелания.