总结:
mx:horizontalAxis:用来定义X轴;
mx:DateTimeAxis:时间轴;
dataUnits="seconds"(里面有的属性:milliseconds seconds minutes hours days weeks months years)
interval="5":间隔时间 minimum="{minDate}":起始时间,绑定到 minDate
maximum="{maxDate}":结束时间,绑定到 maxDate
labelFunction="mylabel":x轴显示的值,有函数 mylabel 返回
alignLabelsToUnits="false":使x轴不标值点从0开始
mx:horizontalAxisRenderers:定义一组渲染X轴的特效;
mx:AxisRenderer:定义特效的;axis="{hAxis}"
mx:verticalAxis:用来定义Y轴;
mx:verticalAxisRenderers:定义一组渲染Y轴的特效;
mx:series:定义一组LineSeries 也就是曲线或者点;
mx:LineSeries:定义要展现的数据曲线,可以定义多条曲线;
yField="valueTest":绑定的数据源中的key为valueTest的值
xField="date":绑定的数据源中的key为date的值
dataProvider="{this.testDatas}":绑定数据testDatas
form="curve":趋势图显示为曲线。可以设置曲线类型(horizontal,reverseStep,segment,step,vertical);
itemRenderer:渲染器美化线样式作用。做一些特殊处理。
下面是一个简单的例子,里面用到的属性很少。
效果图:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
</s:layout>
<fx:Script>
<![CDATA[
import mx.charts.chartClasses.IAxis;
import mx.collections.ArrayCollection;
import mx.formatters.DateFormatter;
private var dateFormat:DateFormatter=new DateFormatter();
[Bindable]
public var stockDataAC:ArrayCollection = new ArrayCollection( [
{date: "2005, 1, 27", close: 41.71, next: 41.71},
{date: "2005, 2, 28", close: 42.21, next: 42.71},
{date: "2005, 3, 29", close: 42.11, next: 43.71},
{date: "2005, 4, 1", close: 42.71, next: 44.71},
{date: "2005, 5, 2", close: 42.99, next: 45.71},
{date: "2005, 6, 3", close: 44, next: 47.71},
{date: "2005, 6, 27", close: 41.71, next: 41.71},
{date: "2005, 7, 28", close: 42.21, next: 42.71},
{date: "2005, 8, 29", close: 42.11, next: 43.71},
{date: "2005, 10, 1", close: 42.71, next: 44.71},
{date: "2005, 11, 2", close: 42.99, next: 45.71},
{date: "2005, 12, 3", close: 44, next: 47.71} ,
{date: "2006, 1, 27", close: 41.71, next: 41.71},
{date: "2006, 2, 28", close: 42.21, next: 42.71},
{date: "2006, 3, 29", close: 42.11, next: 43.71},
{date: "2006, 4, 1", close: 42.71, next: 44.71},
{date: "2006, 5, 2", close: 42.99, next: 45.71},
{date: "2006, 6, 3", close: 44, next: 47.71},
{date: "2006, 6, 27", close: 41.71, next: 41.71},
{date: "2006, 7, 28", close: 42.21, next: 42.71},
{date: "2006, 8, 29", close: 42.11, next: 43.71},
{date: "2006, 10, 1", close: 42.71, next: 44.71},
{date: "2006, 11, 2", close: 42.99, next: 45.71},
{date: "2006, 12, 3", close: 44, next: 47.71} ]);
/**
* 将集合中的时间字符串转换成日期格式
* */
public function myParseFunction(s:String):Date {
//按,分隔取出
var a:Array = s.split(",");
//新建日期对象符值
var newDate:Date = new Date(a[0],a[1]-1,a[2]);
return newDate;
}
/**
* 格式化
*/
private function horlabelFunc(labelValue:Object, previousValue:Object, d:IAxis):String
{
var dtime:Date=labelValue as Date;
dateFormat.formatString="YYYY-MM-DD";
var str:String=dateFormat.format(dtime);
return str;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<mx:Panel title="图形测试" height="100%" width="100%">
<mx:LineChart id="mychart" height="100%" width="100%"
paddingRight="5" paddingLeft="5"
showDataTips="true" dataProvider="{stockDataAC}" >
<mx:horizontalAxis>
<mx:DateTimeAxis dataUnits="days" parseFunction="myParseFunction" labelFunction="horlabelFunc"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" />
</mx:verticalAxis>
<mx:series>
<mx:LineSeries yField="close" xField="date" displayName="测试1"/>
<mx:LineSeries yField="next" xField="date" displayName="测试2"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</s:Application>