1、问题背景
在Flex中,制作一个折线图,并且给折线图的横轴和纵轴进行样式设置,具体实现步骤如下:
2、实现实例
(1)设置横轴样式和数据绑定
- <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)设置纵轴样式和数据绑定
- <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)在图上绑定横轴和纵轴
- <mx:series>
- <mx:LineSeries verticalAxis="{leftAxis}" displayName="兔子" xField="quarter" yField="rabbit"/>
- </mx:series>
3、实现结果
4、附录
- <?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>