<?xml version="1.0"?>
<!-- Simple example to demonstrate the HLOCChart control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var stockDataAC:ArrayCollection = new ArrayCollection( [
{ Date: "25-Jul", Open: 40.55, High: 40.75, Low: 40.24, Close:40.31},
{ Date: "26-Jul", Open: 40.15, High: 40.78, Low: 39.97, Close:40.34},
{ Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63},
{ Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},
{ Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},
{ Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6},
{ Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84},
{ Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12},
{ Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69},
{ Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86},
{ Date: "25-Jul", Open: 40.55, High: 40.75, Low: 40.24, Close:40.31},
{ Date: "26-Jul", Open: 40.15, High: 40.78, Low: 39.97, Close:40.34},
{ Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63},
{ Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},
{ Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},
{ Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6},
{ Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84},
{ Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12},
{ Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69},
{ Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]);
[Bindable]
private var tempstockDataAC:ArrayCollection ;
[Bindable]
private var dataLength:int;
private function init():void{
tempstockDataAC = new ArrayCollection(stockDataAC.source);
dataLength = stockDataAC.length-1;
slider.values[1] = dataLength;
}
private function rangeChange():void{
if(stockDataAC != null && stockDataAC.length!=0){
var tempNum:Number = slider.value;
tempstockDataAC.source = stockDataAC.toArray().slice(slider.values[0],slider.values[1]+1);
}
}
private function getSliderLabel(value:String):String{
return stockDataAC[parseInt(value)].Date;
}
]]>
</mx:Script>
<mx:LineChart id="lineChart" styleName="lineChart" showDataTips="true" dataProvider="{tempstockDataAC}" fontSize="12" width="952.5" height="260" y="40" x="17.5" selectionMode="single">
<!--网格-->
<mx:backgroundElements>
<mx:GridLines id="gridLines" direction="both">
<mx:horizontalStroke>
<mx:Stroke color="black" weight="0" alpha="1.0" />
</mx:horizontalStroke>
<mx:verticalFill>
<mx:SolidColor color="haloBlue" alpha="0.2" />
</mx:verticalFill>
<!-- <mx:verticalAlternateFill>
<mx:SolidColor color="haloSilver" alpha="0.2" />
</mx:verticalAlternateFill> -->
</mx:GridLines>
</mx:backgroundElements>
<!--纵坐标-->
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" minimum="{35}" maximum="{42}" interval="{1}" minorInterval="{0.2}" title="监测值" /> <!-- baseAtZero 是否从0显示;实际应用最好去掉minimum="{35}" maximum="{42}",自动设定最大最小值;-->
</mx:verticalAxis>
<!--横坐标-->
<mx:horizontalAxis>
<mx:CategoryAxis id="haxis" categoryField="Date" title="日期" />
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="Open" displayName="数据" form="segment"><!--form显示曲线样式-->
<mx:lineStroke>
<mx:Stroke color="haloGreen" weight="10"/> <!--设置曲线宽度和颜色-->
</mx:lineStroke>
</mx:LineSeries>
</mx:series>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{haxis}"
canDropLabels="true" />
</mx:horizontalAxisRenderers>
<!-- <mx:seriesFilters>
<mx:Array />
</mx:seriesFilters>-->
</mx:LineChart>
<mx:ControlBar> <!--图例-->
<mx:Legend id="legend" dataProvider="{lineChart}" alpha="0.5"/>
</mx:ControlBar>
<mx:HSlider id="slider" width="150" thumbCount="2" snapInterval="1" minimum="5" maximum="{dataLength}"
dataTipFormatFunction="getSliderLabel"
change="rangeChange()"/>
</mx:Application>
一个LineChart例子
最新推荐文章于 2020-12-17 14:30:38 发布