第五章 CHARTING组件

最新推荐文章于 2023-04-06 09:39:15 发布

mervyn_lee

最新推荐文章于 2023-04-06 09:39:15 发布

阅读量4.5k

点赞数

文章标签： application import encoding flex function actionscript

本文链接：https://blog.csdn.net/mervyn_lee/article/details/3027070

版权

第五章 CHARTING组件

我们都已经知道了FLEX富客户端应用的一个主要方面是最大可能的提高用户体验，那么毫无疑问FLEX对CHARTING开发所提供的弹性是其中非常浓墨重彩的一笔。尤其在ERP系统开发中图表组件对数据的展示程度和效果将不得不被考虑，目前国外国内的很多ERP提供商都在竭力将FLEX图表组件集成到自己的解决方案中。本章从几个方面阐述FLEX图表组件开发的一般过程、图表组件开发基础、高级图表组件开发等等。

5.1 图表组件开发基础

5.1.1 图表数据

图表组件说到底只不过是对数据的各式各样的展示方式。不同的组件对同一数据集合有不同的展示方式。本节阐述的所有的图表应用将基于下面同一个数据集合demoDat.xml,这个文件中包含了一组企业销售业绩的监控数据，realvalue指销售实际值，planvalue指计划值，guessvalue值预测值，realrate指相对同期业绩的实际增长率，而planrate指计划增长率。

<?xml version="1.0" encoding="UTF-8"?>

<root>

</element>

</element>

</element>

</element>

</element>

</element>

</element>

</element>

</element>

</element>

</root>

5.1.2 图表组件

FLEX图表组件基本上分为条柱图Columns/Bars、线图 Lines、区域图Areas、泡泡图Bubbles/Plot、饼图Pies等。

一．条柱图Columns/Bars

对于这类图最重要的是定义横轴和纵轴的绑定属性，本例中横轴绑定时间time属性纵轴分别绑定实际值realvalue计划值planvalue属性。参考示例DemoColumnsAndBars.mxml

<?xml version="1.0" encoding="utf-8"?>

</series>

</horizontalAxis>

</ColumnChart>

</Panel>

</Application>

利用Bar图来展示，

<?xml version="1.0" encoding="utf-8"?>

</series>

</horizontalAxis>

</BarChart>

</Panel>

</Application>

二．线图 Lines

同ColumnChart和BarChart一样，对于线图最重要的也是定义横轴和纵轴的绑定属性。

<?xml version="1.0" encoding="utf-8"?>

</series>

</horizontalAxis>

</LineChart >

</Panel>

</Application>

三．区域图Areas

<?xml version="1.0" encoding="utf-8"?>

</series>

</horizontalAxis>

</AreaChart>

</Panel>

</Application>

四．饼图Pies

饼图基于所绑定的数据属性，显示数据集合中每个元素占百分比。

<?xml version="1.0" encoding="utf-8"?>

</series>

</PieChart>

</Panel>

</Application>

5.2 图表组件常用属性

5.2.1 Axis 标签

纵轴和横轴的标签定义一般由图表的labelFunction属性来指定。其值类型可能是针对CategoryAxis的字符创类型、针对NumbericAxis的Number类型、针对DateTimeAxis的日期Date类型。指定一个labelFunction的场合一般在图表的原始数据格式不能满足横轴或者纵轴的需要，以自定义的方式来格式化坐标轴数据。如，在没有指定坐标轴的labelFunction属性时，

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000}

]);

]]></mx:Script>

<mx:Panel>

<mx:ColumnChart id="column" dataProvider="{planvalue}">

<mx:horizontalAxis>

<mx:CategoryAxis

categoryField="time"

title="planvalue"

</mx:horizontalAxis>

<mx:verticalAxis>

<mx:LinearAxis

title="realvalue"

minimum="0"

maximum="2500"

</mx:verticalAxis>

<mx:series>

<mx:ColumnSeries

xField="time"

yField="realvalue"

displayName="realvalue"

<mx:ColumnSeries

xField="time"

yField="planvalue"

displayName="planvalue"

<mx:ColumnSeries

xField="time"

yField="guessvalue"

displayName="guessvalue"

</mx:series>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

根据原始数据横坐标的单位应该是周，纵坐标的单位是人民币。在图表组件显示时应该指出来具体数字的单位。

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.charts.*;

import mx.collections.ArrayCollection;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000}

]);

public function labelfunc1(

cat:Object,

pcat:Object,

ax:CategoryAxis,

labelItem:Object):String

{

for (var s:String in labelItem) {

trace(s + ":" + labelItem[s]);

}

return cat + "周";

}

public function labelfunc2(

cat:Object,

pcat:Object,

ax:LinearAxis):String

{

return Number(cat)+'元';

}

]]></mx:Script>

<mx:Panel>

<mx:ColumnChart id="column" dataProvider="{planvalue}">

<mx:horizontalAxis>

<mx:CategoryAxis

categoryField="time"

title="planvalue"

labelFunction="labelfunc1"

</mx:horizontalAxis>

<mx:verticalAxis>

<mx:LinearAxis

title="realvalue"

minimum="0"

maximum="2500"

labelFunction="labelfunc2"

</mx:verticalAxis>

<mx:series>

<mx:ColumnSeries

xField="time"

yField="realvalue"

displayName="realvalue"

<mx:ColumnSeries

xField="time"

yField="planvalue"

displayName="planvalue"

<mx:ColumnSeries

xField="time"

yField="guessvalue"

displayName="guessvalue"

</mx:series>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

5.2.2 Axis 标题

像上例所示，在图表组件坐标横轴或者纵轴标签内直接设置其title属性。以此来指定对于坐标轴的一些简单文字说明等。

<mx:horizontalAxis>

<mx:CategoryAxis

categoryField="time"

title="planvalue"

labelFunction="labelfunc1"

</mx:horizontalAxis>

<mx:verticalAxis>

<mx:LinearAxis

title="realvalue"

minimum="0"

maximum="2500"

labelFunction="labelfunc2"

</mx:verticalAxis>

5.2.3 Axis Renderer

Axis Renderer通常用于改变图表的表现风格，如柱线图的颜色等。Renderer可采用自定义组件的方式，也可用FLEX内置的Renderer, 如在MXML标签中格式化图表横轴的颜色为黑色。

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.charts.*;

import mx.collections.ArrayCollection;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000}

]);

]]></mx:Script>

<mx:Panel>

<mx:ColumnChart id="column" dataProvider="{planvalue}">

<mx:horizontalAxis>

<mx:CategoryAxis

categoryField="time"

title="planvalue"

</mx:horizontalAxis>

<mx:verticalAxis>

<mx:LinearAxis

title="realvalue"

minimum="0"

maximum="2500"

</mx:verticalAxis>

<mx:series>

<mx:ColumnSeries

xField="time"

yField="realvalue"

displayName="realvalue"

<mx:ColumnSeries

xField="time"

yField="planvalue"

displayName="planvalue"

<mx:ColumnSeries

xField="time"

yField="guessvalue"

displayName="guessvalue"

</mx:series>

<mx:horizontalAxisRenderer>

<mx:AxisRenderer>

<mx:axisStroke>

<mx:Stroke color="#091234" weight="3"/>

</mx:axisStroke>

</mx:AxisRenderer>

</mx:horizontalAxisRenderer>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

下一个例子展示在ACTIONSCRIPT中动态指定图表坐标轴的AxisRenderer.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="489" height="418">

<mx:Script><![CDATA[

import mx.charts.series.ColumnSeries;

import mx.charts.*;

import mx.collections.ArrayCollection;

import mx.charts.series.PlotSeries;

import mx.charts.renderers.DiamondItemRenderer;

import mx.charts.renderers.CircleItemRenderer;

import mx.charts.renderers.BoxItemRenderer;

import mx.charts.renderers.TriangleItemRenderer;

import mx.charts.renderers.CrossItemRenderer;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000}

]);

[Bindable] public var rvalues:Array = [

{label:"diamond", value: new ClassFactory(DiamondItemRenderer)},

{label:"circle", value: new ClassFactory(CircleItemRenderer)},

{label:"box", value: new ClassFactory(BoxItemRenderer)},

{label:"triangle", value: new ClassFactory(TriangleItemRenderer)},

{label:"crossitem", value: new ClassFactory(CrossItemRenderer)}

];

public function changeRenderer():void

{

var series:ColumnSeries = new ColumnSeries();

series.yField="realvalue";

series.xField="time";

series.setStyle("radius",8);

series.setStyle("itemRenderer",combox.selectedItem.value);

chart.series = [series];

}

]]></mx:Script>

<mx:Model id="data" source="demoData.xml"/>

<mx:ApplicationControlBar width="100%">

<mx:Label text="RENDERER TYPE:"/>

<mx:ComboBox dataProvider="{rvalues}" id="combox" change="changeRenderer()"/>

</mx:ApplicationControlBar>

<mx:Panel>

<mx:ColumnChart id="chart" dataProvider="{planvalue}" height="270">

<mx:horizontalAxis>

<mx:CategoryAxis

categoryField="time"

title="planvalue"

</mx:horizontalAxis>

<mx:verticalAxis>

<mx:LinearAxis

title="realvalue"

minimum="0"

maximum="2500"

</mx:verticalAxis>

<mx:series>

<mx:ColumnSeries

xField="time"

yField="realvalue"

displayName="realvalue"

</mx:series>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

5.2.4 Axis 类型

图表组件基本上都有相似的属性集合，如dataProvider指定用来展示的数据集、categoryField 指定数据集dataProvider中绑定的数据元素属性，

<mx:horizontalAxis>

<mx:CategoryAxis dataProvider="{data}" categoryField="time"/>

</mx:horizontalAxis>

还包括前面阐述的title,labelFunction,displayName等等。坐标轴类型基本上可分为CategoryAxis类型，它对应dataProvider数据集中字符串的属性绑定。LinerarAxis类型对应Number类型数据属性绑定。DateTimeAxis对应Date类型的数据属性绑定。还有LogAxis类型对应正数的Number类型的数据属性绑定。

5.2.5 minField属性

这个属性主要用在图表元素的浮动显示功能。针对上例的数据集合如果用户需要显示实际值和计划值的差值有多少，那么就要绑定minField属性为planvalue,

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="489" height="418">

<mx:Script><![CDATA[

import mx.controls.Alert;

import mx.charts.events.ChartItemEvent;

import mx.collections.ArrayCollection;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000}

]);

]]></mx:Script>

<mx:Model id="data" source="demoData.xml"/>

<mx:Panel>

<mx:ColumnChart id="chart" dataProvider="{data.element}" height="270" >

<mx:horizontalAxis>

<mx:CategoryAxis

categoryField="time"

title="planvalue"

</mx:horizontalAxis>

<mx:verticalAxis>

<mx:LinearAxis

title="realvalue"

minimum="0"

maximum="2500"

</mx:verticalAxis>

<mx:series>

<mx:ColumnSeries

xField="time"

yField="realvalue"

displayName="realvalue"

minField="planvalue"

</mx:series>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

5.3图表事件

像其他FLEX组件一样，图表组件也实现了对一些常用的用户交互动作做出响应的事件封装，如鼠标单击双击图表的某一个区域等等，这些事件分别封装在图表类的下列属性中

事件属性	描述
itemClick	鼠标单击事件
itemDoubleClick	鼠标双击事件
itemMouseDown	鼠标按下事件
itemMouseMove	鼠标在监控区域移动事件
itemRollOut	鼠标移出监控区域事件
itemRollOver	鼠标从一个监控区域移动到新的监控区域
itemMouseUp	监控区域内释放鼠标

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="489" height="418">

<mx:Script><![CDATA[

import mx.controls.Alert;

import mx.charts.events.ChartItemEvent;

import mx.collections.ArrayCollection;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000}

]);

private function initListener():void{

chart.addEventListener(ChartItemEvent.ITEM_CLICK,handler);

chart.addEventListener(ChartItemEvent.ITEM_DOUBLE_CLICK,handler);

chart.addEventListener(ChartItemEvent.ITEM_MOUSE_DOWN,handler);

chart.addEventListener(ChartItemEvent.ITEM_MOUSE_MOVE,handler);

chart.addEventListener(ChartItemEvent.ITEM_MOUSE_UP,handler);

chart.addEventListener(ChartItemEvent.ITEM_ROLL_OUT,handler);

chart.addEventListener(ChartItemEvent.ITEM_ROLL_OVER,handler);

}

private function handler(event:ChartItemEvent):void{

mx.controls.Alert.show('Event '+ event.type +'Was Dispatched!');

}

]]></mx:Script>

<mx:Model id="data" source="demoData.xml"/>

<mx:Panel>

<mx:ColumnChart id="chart" dataProvider="{data.element}" height="270" creationComplete="initListener()">

<mx:horizontalAxis>

<mx:CategoryAxis

categoryField="time"

title="planvalue"

</mx:horizontalAxis>

<mx:verticalAxis>

<mx:LinearAxis

title="realvalue"

minimum="0"

maximum="2500"

</mx:verticalAxis>

<mx:series>

<mx:ColumnSeries

xField="time"

yField="realvalue"

displayName="realvalue"

</mx:series>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

组件初始化完毕后触发initListener方法，这个方法给图表组件注册各种事件监听器，并用handler作为各种事件的事件侦听函数。

5.4 复合坐标轴

在实际的应用中有可能需要在一个图表组件中显示三个坐标轴，比如一个横轴两个纵轴。其中一个纵轴用来标注销售的实际值，另一个标注实际值的增长率。实现这个功能，最主要的是设置图表组件的secondSeries属性指定附加的坐标轴以及secondDataProvider属性指定新坐标轴的数据源。参考下述示例，

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="489" height="418">

<mx:Script><![CDATA[

import mx.controls.Alert;

import mx.charts.events.ChartItemEvent;

import mx.collections.ArrayCollection;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000,realrate:20,planrate:10},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000,realrate:40,planrate:50},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000,realrate:20,planrate:80}

]);

]]></mx:Script>

<mx:Model id="data" source="demoData.xml"/>

<mx:Panel>

<mx:ColumnChart id="chart" dataProvider="{data.element}" secondDataProvider="{data.element}" height="270" >

<mx:series>

<mx:ColumnSeries yField="realvalue" displayName="realvalue" />

<mx:ColumnSeries yField="planvalue" displayName="planvalue" />

</mx:series>

<mx:secondSeries>

<mx:LineSeries form="curve" xField="time" yField="realrate"/>

</mx:secondSeries>

<mx:horizontalAxis>

<mx:CategoryAxis categoryField="time" />

</mx:horizontalAxis>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

5.5 图表组件效果

在实际应用开发中为了能够更炫的定制数据展示过程，都会考虑到在图表组件上应用一些效果。针对图表组件，其可绑定的效果一般除了FLEX标准效果类以外，还可以自定义一些效果类，如在前面章节中谈及的自定义仪表盘组件。最为示例本节将重点展示Interpolate,Zoom和Slide三种效果类。

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="489" height="418">

<mx:Script><![CDATA[

import mx.controls.Alert;

import mx.charts.events.ChartItemEvent;

import mx.collections.ArrayCollection;

[Bindable]

public var planvalue:ArrayCollection = new ArrayCollection([

{time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000,realrate:20,planrate:10},

{time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000,realrate:40,planrate:50},

{time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000,realrate:20,planrate:80}

]);

private function click():void{

chart.dataProvider = data.element;

chart.secondDataProvider = data.element;

}

]]></mx:Script>

<mx:Model id="data" source="demoData.xml"/>

<mx:SeriesInterpolate id="interpolate" elementOffset="-10" minimumElementDuration="200" duration="2500"/>

<mx:SeriesZoom id="zoom" horizontalFocus="center" relativeTo="chart" verticalFocus="center" elementOffset="30" minimumElementDuration="200" duration="2500"/>

<mx:SeriesSlide id="slide" direction="left" elementOffset="30" minimumElementDuration="100" duration="2500"/>

<mx:ApplicationControlBar>

<mx:Button label="Show Effects" click="click()"/>

</mx:ApplicationControlBar>

<mx:Panel>

<mx:ColumnChart id="chart" height="270" showEffect="{interpolate}" >

<mx:series>

<mx:ColumnSeries yField="realvalue" displayName="realvalue" showDataEffect="{interpolate}" />

<mx:ColumnSeries yField="planvalue" displayName="planvalue" showDataEffect="{zoom}" />

</mx:series>

<mx:secondSeries>

<mx:LineSeries form="curve" xField="time" yField="realrate" showDataEffect="{slide}"/>