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}]);
           private function myLabelFormat(obj:Object, pcat:Object, ax:LinearAxis):String
           {
               if(int(obj) > 100)
                   return "";
               return numForm.format(obj) + "%";
           }
          
        ]]>
    </mx:Script>
    <!--跟纵坐标数值后面添加百分号:%-->
    <mx:NumberFormatter id="numForm" useThousandsSeparator="true"/>
    <!--定制坐标轴样式-->
    <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" labelFunction="myLabelFormat"/>
    </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)