在Flex中，制作一个折线图

来源：互联网发布：反转故事知乎神经病编辑：程序博客网时间：2024/04/27 15:58

1、问题背景

在Flex中，制作一个折线图，并且给折线图的横轴和纵轴进行样式设置，具体实现步骤如下：

2、实现实例

（1）设置横轴样式和数据绑定

[plain] view plaincopy
<mx:horizontalAxis>  
    <mx:CategoryAxis categoryField="quarter" displayName="季度"/>  
</mx:horizontalAxis>  
              
<mx:horizontalAxisRenderers>  
    <mx:AxisRenderer placement="bottom" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"  
                                 axisStroke="{new Stroke(0xFF0000,1)}">  
        <mx:axis>  
            <mx:LinearAxis id="bottomAxis"/>  
        </mx:axis>  
    </mx:AxisRenderer>  
</mx:horizontalAxisRenderers>  

（2）设置纵轴样式和数据绑定

[plain] view plaincopy
<mx:verticalAxisRenderers>  
    <mx:AxisRenderer placement="left" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"  
                                 axisStroke="{new Stroke(0xFF0000,1)}">  
          <mx:axis>  
           <mx:LinearAxis id="leftAxis"/>  
          </mx:axis>  
    </mx:AxisRenderer>  
</mx:verticalAxisRenderers>  

（3）在图上绑定横轴和纵轴

[plain] view plaincopy
<mx:series>  
    <mx:LineSeries verticalAxis="{leftAxis}" displayName="兔子" xField="quarter" yField="rabbit"/>  
</mx:series>  

3、实现结果

4、附录

[plain] view plaincopy
<?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"  
               width="100%" height="100%" fontSize="12"  
               fontFamily="微软雅黑">  
    <s:layout>  
        <s:BasicLayout/>  
    </s:layout>  
    <fx:Script>  
        <![CDATA[  
            import mx.graphics.Stroke;  
        ]]>  
    </fx:Script>  
    <fx:Script>  
        <![CDATA[  
            import mx.collections.ArrayCollection;  
            import mx.events.FlexEvent;  
  
            [Bindable]  
            //折线图数据绑定  
            private var chartArray:ArrayCollection = new ArrayCollection([  
                {quarter:"第一季度",rabbit:"342",birthRate:"0.78677"},  
                {quarter:"第二季度",rabbit:"457",birthRate:"0.322343232"},  
                {quarter:"第三季度",rabbit:"786",birthRate:"0.457645"},  
                {quarter:"第四季度",rabbit:"654",birthRate:"0.454848"}  
            ]);  
  
        ]]>  
    </fx:Script>  
    <fx:Declarations>  
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
    </fx:Declarations>  
      
    <mx:VBox width="100%" height="100%" paddingBottom="100" paddingLeft="100" paddingRight="150"  
             paddingTop="100" horizontalAlign="center">  
        <mx:LineChart id="line" width="100%" height="90%" dataProvider="{chartArray}"  
                      showAllDataTips="true">  
            <mx:horizontalAxis>  
                <mx:CategoryAxis categoryField="quarter" displayName="季度"/>  
            </mx:horizontalAxis>  
              
            <mx:horizontalAxisRenderers>  
                <mx:AxisRenderer placement="bottom" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"  
                                 axisStroke="{new Stroke(0xFF0000,1)}">  
                    <mx:axis>  
                        <mx:LinearAxis id="bottomAxis"/>  
                    </mx:axis>  
                </mx:AxisRenderer>  
            </mx:horizontalAxisRenderers>  
              
            <mx:verticalAxisRenderers>  
                <mx:AxisRenderer placement="left" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"  
                                 axisStroke="{new Stroke(0xFF0000,1)}">  
                    <mx:axis>  
                        <mx:LinearAxis id="leftAxis"/>  
                    </mx:axis>  
                </mx:AxisRenderer>  
            </mx:verticalAxisRenderers>  
              
            <mx:series>  
                <mx:LineSeries verticalAxis="{leftAxis}" displayName="兔子" xField="quarter" yField="rabbit"/>  
            </mx:series>  
              
        </mx:LineChart>  
        <mx:Legend dataProvider="{line}"/>  
          
    </mx:VBox>  
</s:Application>  

0 0