flex 柱形图,饼图,线形图源码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;

   //柱形图和饼图的数据源
   [Bindable]
   private var medalsAC:ArrayCollection=new ArrayCollection
   (
   [{Country: "美国", 金牌: 35, 银牌: 39, 铜牌: 29},
   {Country: "中国", 金牌: 88, 银牌: 17, 铜牌: 14},
    {Country: "英国", 金牌: 27, 银牌: 27, 铜牌: 38}]);
   
   
    [Bindable]
         private var lines:ArrayCollection = new ArrayCollection( [
             { Month: "一月", 盈利: 2000, 消费: 1500, 数量: 450 },
             { Month: "二月", 盈利: 1000, 消费: 200, 数量: 600 },
             { Month: "三月", 盈利: 1500, 消费: 500, 数量: 300 },
             { Month: "四月", 盈利: 1800, 消费: 1200, 数量: 900 },
             { Month: "五月", 盈利: 2400, 消费: 575, 数量: 500 },
             { Month: "六月", 盈利: 2587, 消费: 567, 数量: 555 },
             { Month: "七月", 盈利: 1687, 消费: 945, 数量: 452 },
             { Month: "八月", 盈利: 5210, 消费: 867, 数量: 510 },
             { Month: "九月", 盈利: 6777, 消费: 298, 数量: 421 },
             { Month: "十月", 盈利: 8765, 消费: 986, 数量: 5554},
             { Month: "十一月", 盈利: 3456, 消费: 1789, 数量: 854 },
             { Month: "十二月", 盈利: 6533, 消费: 845, 数量: 1200 },
              ]);
        
    //饼图回调方法
    private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
              var temp:String= (" " + percentValue).substr(0,6);
              return data.Country + ":" + '/n'+ "金牌:" + data.金牌 +"/n"+temp + "%";
       }

  ]]>
 </mx:Script>
 <!--标识 内部颜色-->
 <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
 <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
 <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
 <!--标识 边框颜色-->
 <mx:Stroke id="s1" color="yellow" weight="2"/>
 <mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
 <mx:Stroke id="s3" color="0xFFCC66" weight="2"/>
 <!--===================柱形图================-->
 <mx:ColumnChart x="21" y="74" id="chart" height="237" dataProvider="{medalsAC}" fontSize="12" width="295">
  <mx:horizontalAxis>
   <mx:CategoryAxis categoryField="Country"/>
  </mx:horizontalAxis>

  <mx:series>
   <mx:ColumnSeries xField="Country" yField="金牌" displayName="金牌" fill="{sc1}" stroke="{s1}"/>
   <mx:ColumnSeries xField="Country" yField="银牌" displayName="银牌" fill="{sc2}" stroke="{s2}"/>
   <mx:ColumnSeries xField="Country" yField="铜牌" displayName="铜牌" fill="{sc3}" stroke="{s3}"/>
  </mx:series>
 </mx:ColumnChart>
 <mx:Legend dataProvider="{chart}" x="334" y="91" fontSize="12" height="103"/>
 
 
 <!--===================饼图================-->
    <!-- 饼图提示样式 -->
    <mx:Stroke id="callouts" weight="2" color="red" alpha=".9" caps="square"/>
   
    <!-- 饼图分割线的样式-->
    <mx:Stroke id="radial" weight="1" color="gray" alpha=".6"/>

    <!-- 饼图圆形边框样式 -->
    <mx:Stroke id="pieborder" color="blue" weight="2" alpha=".5"/>

        <mx:PieChart id="pchart"
            height="284"
            width="387"
            showDataTips="true"
            dataProvider="{medalsAC}"
         x="451" y="50" fontSize="12">         
            <!--fills:饼图填充颜色;labelPosition:绘制提示-->
            <mx:series>
                <mx:PieSeries  nameField="Country" labelPosition="callout"
                    field="金牌" labelFunction="displayGold"
                    calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}" >
                    <mx:filters>
                        <mx:Array/>
                    </mx:filters>
                </mx:PieSeries>
            </mx:series>
        </mx:PieChart> 
        <mx:Legend dataProvider="{pchart}" x="870" y="137" height="97" fontSize="12"/>
       
         <!--===========曲线图=====================-->
        <mx:LineChart x="21" y="342" id="lineChart" width="693" height="273" dataProvider="{lines}" fontSize="12">
         <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="Month"/>
   </mx:horizontalAxis>
                <mx:series>
                        <mx:LineSeries yField="盈利" form="curve" displayName="盈利" lineStroke="{s1}"/>
                  <mx:LineSeries yField="消费" form="curve" displayName="消费" lineStroke="{s2}"/>
                  <mx:LineSeries yField="数量" form="curve" displayName="数量" lineStroke="{s3}"/>
                </mx:series>
        </mx:LineChart>
        <mx:Legend dataProvider="{lineChart}" x="121" y="623" width="282" height="37" fontSize="12"/>
</mx:Application>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值