卢瑟flex实例教程一：Ationscript创建坐标轴和混合图
卢瑟flex实例教程1：Ationscript创建坐标轴和混合图
本人不姓“卢”，只是三十未立，取‘loser’的谐音，常常在英文影视剧里看到对某人蔑视的来一句‘You are nobody,just a loser! ’，在这个人人争当'winner'的时代，我常常觉得自己是被抛离的‘loser’，颈椎酸疼的写着代码，没有社交、没有休闲，我忘记了花开的样子，水流的声响。一个人过七夕，不能父母膝下承欢，尽一份孝道。为了让日子不那么荒芜我决定写一份总结性的教程，说是教程有些勉强，毕竟没有一个很完善的全局的梳理，只是把应用中涉及的问题实例总结一下，因为我理解那些为了一个小问题纠结的感受，我只是希望为那些用flex编写应用的人在遇到同样的问题时，可以在这里得到一点启发，少花一点时间，则善莫大焉了,我决定从flex3开始编写，用一个月左右的时间，每天一篇，之后可能会补充flex4的内容，先说3，再道4；这份文档一定是一个动态的，可能同一篇文章会不断的充实，删改，先‘授人以鱼’再争取‘授人以渔’。另外我会把引用的文档的地址列出，既是对原作者的尊重，也是让读者可以到原文档那里得到更多的收获，当然有些可能已经无法确定出处的地方，只能表示歉意，并对贡献者致谢。‘卢瑟（loser）’就是以最卑微、最悲壮的心态启航，愿读者皆‘温拿（winner）’。也许荒芜的日子依旧长不出鲜花，但至少要有一株韧草。
为什么要用Actionscript来创建坐标轴和混合图呢？这并非无关紧要的问题，我们在做一件事情之前要看看这件事应不应该做，或者值不值得做，而不是盲目去做，新东方的徐小 平(竟然告诉我是敏感词)写过一本《图穷对话录》，他是做留学咨询的，可是大部分时间感觉他在灌输这样一种观念:是否需要出国？而不是简单的告知你怎样出国。flex中mxml标签文件和actionscript的关系很像是Jsp和servlet的关系，mxml会被转成actionscript并编译，mxml方便了界面编写，但是也失去了一些灵活性，有一定的局限，例如:图形中的序列数量是动态的（可能是5条线也可能是8条线，各个线的颜色也是动态分配的）；或者多个图形，基本主界面基本相同，但是略有差异，例如坐标轴有的是数值有的是百分比，如果把相似的图形每个都创建新的组件，就会大量的粘贴复制代码，如果一处要修改就要修改多处，这就是所谓的“代码腐 败”，这种腐 败会不断扩散。
接着说一下混合图，所谓混合图就是柱图和线图混合，一般要有两个坐标轴。如下图
参考文献：flex柱状图和折线图的混合图使用http://blog.****.net/zhongweijian/article/details/4692668
本人不姓“卢”，只是三十未立，取‘loser’的谐音，常常在英文影视剧里看到对某人蔑视的来一句‘You are nobody,just a loser! ’，在这个人人争当'winner'的时代，我常常觉得自己是被抛离的‘loser’，颈椎酸疼的写着代码，没有社交、没有休闲，我忘记了花开的样子，水流的声响。一个人过七夕，不能父母膝下承欢，尽一份孝道。为了让日子不那么荒芜我决定写一份总结性的教程，说是教程有些勉强，毕竟没有一个很完善的全局的梳理，只是把应用中涉及的问题实例总结一下，因为我理解那些为了一个小问题纠结的感受，我只是希望为那些用flex编写应用的人在遇到同样的问题时，可以在这里得到一点启发，少花一点时间，则善莫大焉了,我决定从flex3开始编写，用一个月左右的时间，每天一篇，之后可能会补充flex4的内容，先说3，再道4；这份文档一定是一个动态的，可能同一篇文章会不断的充实，删改，先‘授人以鱼’再争取‘授人以渔’。另外我会把引用的文档的地址列出，既是对原作者的尊重，也是让读者可以到原文档那里得到更多的收获，当然有些可能已经无法确定出处的地方，只能表示歉意，并对贡献者致谢。‘卢瑟（loser）’就是以最卑微、最悲壮的心态启航，愿读者皆‘温拿（winner）’。也许荒芜的日子依旧长不出鲜花，但至少要有一株韧草。
为什么要用Actionscript来创建坐标轴和混合图呢？这并非无关紧要的问题，我们在做一件事情之前要看看这件事应不应该做，或者值不值得做，而不是盲目去做，新东方的徐小 平(竟然告诉我是敏感词)写过一本《图穷对话录》，他是做留学咨询的，可是大部分时间感觉他在灌输这样一种观念:是否需要出国？而不是简单的告知你怎样出国。flex中mxml标签文件和actionscript的关系很像是Jsp和servlet的关系，mxml会被转成actionscript并编译，mxml方便了界面编写，但是也失去了一些灵活性，有一定的局限，例如:图形中的序列数量是动态的（可能是5条线也可能是8条线，各个线的颜色也是动态分配的）；或者多个图形，基本主界面基本相同，但是略有差异，例如坐标轴有的是数值有的是百分比，如果把相似的图形每个都创建新的组件，就会大量的粘贴复制代码，如果一处要修改就要修改多处，这就是所谓的“代码腐 败”，这种腐 败会不断扩散。
接着说一下混合图，所谓混合图就是柱图和线图混合，一般要有两个坐标轴。如下图
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var data1:ArrayCollection=new ArrayCollection([{date: "10月1日", all: 4001.87}, {date: "10月2日", all: 4005.74}, {date: "10月3日", all: 4002.77}, {date: "10月4日", all: 4008.06},]);
[Bindable]
public var data2:ArrayCollection=new ArrayCollection([{date: "10月1日", sale: 157.59}, {date: "10月2日", sale: 158.23}, {date: "10月3日", sale: 150.71}, {date: "10月4日", sale: 156.88},]);
[Bindable]
public var data3:ArrayCollection=new ArrayCollection([{date: "10月1日", offer: 124.14}, {date: "10月2日", offer: 160.3}, {date: "10月3日", offer: 122.71}, {date: "10月4日", offer: 136.88},]);
]]>
</mx:Script>
<mx:Panel title="多轴图表"
fontSize="14">
<!--以柱形图表为基础, 第一类数据来源于data1
第二类数据来源于data2-->
<mx:ColumnChart id="myChart"
showDataTips="true"
fontSize="14">
<!--共用X轴，数据来源于data1中的date-->
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{data1}"
categoryField="date"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<!--设定左边Y轴坐标的数值范围 -->
<mx:LinearAxis minimum="4000.00"
maximum="4010.00"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries id="cs1"
dataProvider="{data1}"
xField="date"
yField="all"
displayName="大盘指数"/>
</mx:series>
<mx:secondVerticalAxis>
<!--设定Y轴坐标的数值范围 -->
<mx:LinearAxis minimum="110"
maximum="170"/>
</mx:secondVerticalAxis>
<!--定义第二个Series -->
<mx:secondSeries>
<mx:LineSeries id="cs2"
dataProvider="{data2}"
xField="date"
yField="sale"
displayName="交易量"/>
<mx:LineSeries id="cs3"
dataProvider="{data3}"
xField="date"
yField="offer"
displayName="offer量"/>
</mx:secondSeries>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>
参考文献：flex柱状图和折线图的混合图使用http://blog.****.net/zhongweijian/article/details/4692668