Flex画图
画饼状图
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalGap="0" initialize="initData()">
<mx:Script>
<![CDATA[
import components.WidgetSeg;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
public function initData() : void
{
dataSet.send();
}
public function resultHandler(event:ResultEvent):void
{
var count:int = 0;
var items = dataSet.lastResult.data.item;
if(items != null && items.length > 0)
{
for(var i:int=0; i<items.length; i++) {
count += items[i].Value1;
}
}
segNum.text = (segNum.text + count + "条");
}
]]>
</mx:Script>
<!--mx:Model id="dataSet" source="data/NeData.xml" /-->
<mx:Label id="segNum" text="总光缆数：" fontSize="12" fontWeight="bold" color="#ffffff"/>
<mx:HTTPService id="dataSet" url="{parentApplication.cableResAlarmUrl}" method="GET" result="resultHandler(event)"/>
<!-- SeriesZoom 效果是将图表数据聚合到您指定的焦点位置，或从该位置分解出图表数据 -->
<mx:SeriesZoom id="eff" horizontalFocus="center" relativeTo="chart" verticalFocus="center" elementOffset="30" minimumElementDuration="200" duration="1000"/>
<!-- Stroke 类定义线条的属性 -->
<mx:Stroke id="stroke" color="#ffffff" weight="1" />
<mx:PieChart id="pie" dataProvider="{dataSet.lastResult.data.item}" showDataTips="true" width="200" height="150">
<mx:series>
<mx:PieSeries showDataEffect="{eff}" hideDataEffect="{eff}" nameField="Name" field="Value1" explodeRadius=".05" color="#ffffff" labelPosition="callout" fontSize="12" calloutStroke="{stroke}"/>
</mx:series>
</mx:PieChart>
<!--Legend 控件可向图表中添加图例，此图例可为图表中的每个数据系列显示一个标签，以及一个用于显示系列的图表元素的键-->
<mx:Legend dataProvider="{pie}" direction="horizontal" backgroundColor="#ffffff"/>
<!--/mx:Panel-->
</mx:VBox>
画柱状图
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalGap="0" initialize="initData()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
public function resultHandler(event:ResultEvent):void
{
col.dataProvider = dataSet.lastResult.data.item;
}
public function initData() : void
{
dataSet.send();
}
]]>
</mx:Script>
<!--mx:Model id="dataSet" source="/data/mbUsers.xml" /-->
<mx:HTTPService id="dataSet" url="{parentApplication.mbUsersUrl}" method="GET" result="resultHandler(event)"/>
<mx:SeriesZoom id="eff" horizontalFocus="center" relativeTo="chart" verticalFocus="center" elementOffset="50" minimumElementDuration="200" duration="1000"/>
<!--mx:Panel title="月度中断业务可用率" width="350" height="200" textAlign="center" layout="horizontal"-->
<mx:ColumnChart id="col" showDataTips="true" width="100%" height="100%" dataProvider="{dataSet}" fontSize="12" color="#ffffff">
<mx:series>
<!-- 定义 ColumnChart 控件的数据系列 -->
<mx:ColumnSeries showDataEffect="{eff}" hideDataEffect="{eff}" yField="Value" displayName="可用率(%)" itemRenderer="sandy.util.PerColumnFill"/>
</mx:series>
<mx:horizontalAxis>
<!-- CategoryAxis 类允许图表表示由轴上的一组离散值组成的数据。 -->
<mx:CategoryAxis categoryField="Vender" />
</mx:horizontalAxis>
</mx:ColumnChart>
<!--mx:Legend dataProvider="{col}" direction="horizontal" backgroundColor="#ffffff"/-->
<!--/mx:Panel-->
</mx:VBox>