Flex 4

Gráficos

Charting Controls
‡ Los controles de gráficos permiten representar datos numéricos y estadísticos en un gráfico con formato interactivo.

Fuente de datos
<?xml version= 1.0 ?> <data> <row> <fruit>Apples</fruit> <sales>34</sales> </row> <row> <fruit>Oranges</fruit> <sales>23</sales> </row> <row> <fruit>Pears</fruit> <sales>45</sales> </row> </data>

‡ Estos datos en XML se pueden presentar en DataGrid o en Gráficos.

Tipos de Gráficos
‡ En Flex disponemos de 9 tipos de gráficos ‡ Los datos que vamos a necesitar para cada gráfico depende del gráfico a utilizar. ‡ No es igual representar datos en un gráfico circular que en un gráfico de cotizaciones (que requiere varios valores de datos)

Qué datos utilizar
‡ La serie de datos que podemos representar en un gráfico pueden ser:
± Array ± ArrayList ± ArrayCollection
‡ si vamos a realizar cambios de datos en tiempo de ejecución es preferible utilizar ArrayList o ArrayCollection.

Tipos de Gráficos

Crear gráficos
‡ Como todos los controles visuales de Flex podemos crear los gráficos
± con MXML ± con AS

usando MXML
<mx:PieChart dataProvider= {salesData} height= 100% width= 100% > <mx:series> <mx:PieSeries field= sales labelField= fruit labelPosition= inside explodeRadius= .05 /> </mx:series> </mx:PieChart>

usando AS
import mx.charts.series.PieSeries; import mx.charts.PieChart; private function createChart():void { var series:PieSeries = new PieSeries(); series.field= sales ; series.labelField= fruit ; series.explodeRadius=.01; series.setStyle( labelPosition , inside ); var chart:PieChart = new PieChart(); chart.visible=true; chart.dataProvider=salesData; chart.percentWidth=100; chart.percentHeight=100; chart.series=[series]; contentGroup.addElement(chart) }

Ejemplo piechartAS.mxml
‡ Crea un gráfico circular (de quesito) en donde muestres una serie de datos ‡ la propiedad explodeRadius indica la separación entre cada quesito

‡ Vemos el resto de gráficos ‡ Cada gráfico tiene su propiedades concretas.

Sign up to vote on this title
UsefulNot useful