flex LineChart用法小结
flex LineChart用法总结
以下是我最近做flex组件编程时的总结，是主要针对lineChart的，其中某些属性对同是有横纵坐标的columnChart、barChart等都有效，比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundGradientColors="[0xFFFFFF, 0xd5f3fa]" creationComplete="myInit()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function myInit() : void {
lineChart.dataProvider = Data;
}
public var Data:ArrayCollection = new ArrayCollection
([{name:"网络设备",value:67,value1:55},
{name:"服务器",value:66,value1:76},
{name:"中间件",value:99,value1:69},
{name:"数据库",value:87,value1:45}]);
]]>
</mx:Script>
<!--定制坐标轴样式-->
<mx:Stroke id="s1" weight="3" color="#5eaf60"/>
<mx:Stroke id="s2" weight="3" color="#1144ef"/>
<mx:Stroke id="ver1" weight="1" color="yellow" caps="square"/>
<mx:VBox width="100%" height="100%">
<!--showDataTips用来确定当鼠标放到线上面是时候提示信息-->
<mx:LineChart id="lineChart" width="300" height="400" showDataTips="true">
<mx:backgroundElements>
<!--定制图表水平网格线,direction有horizontal(水平)、vertical(垂直)-->
<!--horizontalChangeCount可设置几个刻度显示一条网格线-->
<!--horizontalTickAligned用来确定坐标轴上的刻度和水平网格线位置的对应关系-->
<mx:GridLines direction="horizontal" horizontalChangeCount="1" horizontalTickAligned="true">
<mx:horizontalStroke>
<!--alpha透明度，weight线条的粗细大小-->
<mx:Stroke color="red" weight="2" alpha="0.1"/>
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxis>
<!--ticksBetweenLabels用来确定坐标轴上的标签和刻度位置的对应关系;为false时，标签和刻度位置相对应-->
<mx:CategoryAxis id="h1" categoryField="name" ticksBetweenLabels="false"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<!--baseAtZero用来确定坐标轴的刻度值时候从0开始;minimum="0"防止出现负数-->
<!--minorInterval:y轴线条的间隔;interval:y轴数值的间隔-->
<mx:LinearAxis id="v1" baseAtZero="true" minimum="0" interval="20"/>
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<!--tickPlacement横坐标的刻度显示方式,Eg:cross-跨横坐标线显示刻度-->
<!--color和fontSize是用来设置标签的-->
<mx:AxisRenderer axis="{h1}" tickPlacement="cross" axisStroke="{ver1}" color="red" fontSize="12"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{v1}" axisStroke="{ver1}" color="blue" fontSize="14"/>
</mx:verticalAxisRenderers>
<mx:series>
<!--lineStroke设置线条的粗细和颜色；form为线条的样式-->
<!--displayName用来设置提示该线条的名称-->
<mx:LineSeries xField="name" yField="value" lineStroke="{s1}" form="segment" displayName="可用率"/>
<mx:LineSeries xField="name" yField="value1" lineStroke="{s2}" form="segment" displayName="执行率"/>
</mx:series>
<!--过滤线条的阴影-->
<mx:seriesFilters>
<mx:Array />
</mx:seriesFilters>
</mx:LineChart>
</mx:VBox>
</mx:Application>
以下是我最近做flex组件编程时的总结，是主要针对lineChart的，其中某些属性对同是有横纵坐标的columnChart、barChart等都有效，比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundGradientColors="[0xFFFFFF, 0xd5f3fa]" creationComplete="myInit()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function myInit() : void {
lineChart.dataProvider = Data;
}
public var Data:ArrayCollection = new ArrayCollection
([{name:"网络设备",value:67,value1:55},
{name:"服务器",value:66,value1:76},
{name:"中间件",value:99,value1:69},
{name:"数据库",value:87,value1:45}]);
]]>
</mx:Script>
<!--定制坐标轴样式-->
<mx:Stroke id="s1" weight="3" color="#5eaf60"/>
<mx:Stroke id="s2" weight="3" color="#1144ef"/>
<mx:Stroke id="ver1" weight="1" color="yellow" caps="square"/>
<mx:VBox width="100%" height="100%">
<!--showDataTips用来确定当鼠标放到线上面是时候提示信息-->
<mx:LineChart id="lineChart" width="300" height="400" showDataTips="true">
<mx:backgroundElements>
<!--定制图表水平网格线,direction有horizontal(水平)、vertical(垂直)-->
<!--horizontalChangeCount可设置几个刻度显示一条网格线-->
<!--horizontalTickAligned用来确定坐标轴上的刻度和水平网格线位置的对应关系-->
<mx:GridLines direction="horizontal" horizontalChangeCount="1" horizontalTickAligned="true">
<mx:horizontalStroke>
<!--alpha透明度，weight线条的粗细大小-->
<mx:Stroke color="red" weight="2" alpha="0.1"/>
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxis>
<!--ticksBetweenLabels用来确定坐标轴上的标签和刻度位置的对应关系;为false时，标签和刻度位置相对应-->
<mx:CategoryAxis id="h1" categoryField="name" ticksBetweenLabels="false"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<!--baseAtZero用来确定坐标轴的刻度值时候从0开始;minimum="0"防止出现负数-->
<!--minorInterval:y轴线条的间隔;interval:y轴数值的间隔-->
<mx:LinearAxis id="v1" baseAtZero="true" minimum="0" interval="20"/>
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<!--tickPlacement横坐标的刻度显示方式,Eg:cross-跨横坐标线显示刻度-->
<!--color和fontSize是用来设置标签的-->
<mx:AxisRenderer axis="{h1}" tickPlacement="cross" axisStroke="{ver1}" color="red" fontSize="12"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{v1}" axisStroke="{ver1}" color="blue" fontSize="14"/>
</mx:verticalAxisRenderers>
<mx:series>
<!--lineStroke设置线条的粗细和颜色；form为线条的样式-->
<!--displayName用来设置提示该线条的名称-->
<mx:LineSeries xField="name" yField="value" lineStroke="{s1}" form="segment" displayName="可用率"/>
<mx:LineSeries xField="name" yField="value1" lineStroke="{s2}" form="segment" displayName="执行率"/>
</mx:series>
<!--过滤线条的阴影-->
<mx:seriesFilters>
<mx:Array />
</mx:seriesFilters>
</mx:LineChart>
</mx:VBox>
</mx:Application>