<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="application1_creationCompleteHandler(event)" layout="absolute" width="1000" height="600" xmlns:aeon="aeon.*" xmlns:aswing="org.aswing.*" xmlns:local="*">
<mx:Style>
Application{
fontSize:12px;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.utils.ObjectProxy;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection(
[]
);
[Bindable]
private var objleft:ObjectProxy;
[Bindable]
private var objright:ObjectProxy;
private var attrs:Array = ["matel","wood","flood","fire","earth"];
private function randAttr(who:String):void
{
var total:Number = 100;
var list:Array = attrs.slice();
while(total>0 && list.length>0){
var key:String = list[Math.floor(Math.random()*list.length)];
list.splice(list.indexOf(key),1);
var value:Number = total*Math.random();
var obj:Object = expensesAC.getItemAt(attrs.indexOf(key));
obj[who] = value;
total -= value;
}
}
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
expensesAC.addItem({elementname:"matel",left:0,right:0});
expensesAC.addItem({elementname:"wood",left:0,right:0});
expensesAC.addItem({elementname:"flood",left:0,right:0});
expensesAC.addItem({elementname:"fire",left:0,right:0});
expensesAC.addItem({elementname:"earth",left:0,right:0});
this.randAttr("left");
this.randAttr("right");
expensesAC.refresh();
}
protected function button1_clickHandler(event:MouseEvent):void
{
this.randAttr("left");
this.randAttr("right");
expensesAC.refresh();
}
]]>
</mx:Script>
<!-- Define custom colors for use as fills in the AreaChart control. -->
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
<mx:SolidColor id="sc2" color="red" alpha=".3"/>
<mx:SolidColor id="sc3" color="green" alpha=".3"/>
<!-- Define custom Strokes. -->
<mx:Stroke id = "s1" color="blue" weight="2"/>
<mx:Stroke id = "s2" color="red" weight="2"/>
<mx:Stroke id = "s3" color="green" weight="2"/>
<mx:Panel title="LineChart and AreaChart Controls Example"
height="100%" width="471" layout="horizontal" x="122" y="0">
<mx:Canvas x="122" y="33" width="100%" height="100%">
<mx:ColumnChart top="-1" id="column"
height="156"
width="361"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{expensesAC}"
x="98">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="elementname"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
yField="left"
displayName="left"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
yField="right"
displayName="right"
fill="{sc2}"
stroke="{s2}"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{Areachart}"/>
<mx:AreaChart id="Areachart" height="142" width="356"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{expensesAC}" x="103" y="161">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="elementname"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries yField="left" form="curve" displayName="left" areaStroke="{s1}" areaFill="{sc1}"/>
<mx:AreaSeries yField="right" form="curve" displayName="right" areaStroke="{s2}" areaFill="{sc2}"/>
</mx:series>
</mx:AreaChart>
</mx:Canvas>
</mx:Panel>
<mx:Button x="10" y="10" label="flush" click="button1_clickHandler(event)"/>
</mx:Application>
柱状图和区域图表的一个五行的数据显示
最新推荐文章于 2023-04-14 12:47:59 发布