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>