Flex实现双轴组合图的设计思路及代码_Flex

1、设计思路

(1)设计一个组合图,该图共用一个数据源
(2)组合图是有柱状图和折线图组合的
(3)柱状图显示的数据是依据左边的竖直轴,折线图的数据依据右边的竖直轴

2、源码如下

DoubleY.mxml:

复制代码 代码如下:

<?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%">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<s:SolidColor id="sc1" color="0x00BFFF" alpha=".3"/>
<mx:SolidColorStroke id="s1" color="0x00BFFF" weight="2"/>
</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

//组合图数据绑定
[Bindable]
private var gridArray:ArrayCollection = new ArrayCollection([
{quarter:"第一季度",Monday:"78454",Tuesday:"45454",Wednesday:"12012",Thursday:"78441",Friday:"32314",Saturday:"89454",Sunday:"45421",Rate:"23"},
{quarter:"第二季度",Monday:"56444",Tuesday:"65612",Wednesday:"78454",Thursday:"45124",Friday:"35451",Saturday:"45421",Sunday:"65421",Rate:"47"},
{quarter:"第三季度",Monday:"51210",Tuesday:"94210",Wednesday:"65643",Thursday:"45011",Friday:"45122",Saturday:"45421",Sunday:"65988",Rate:"13"},
{quarter:"第四季度",Monday:"61210",Tuesday:"45122",Wednesday:"65323",Thursday:"95110",Friday:"65623",Saturday:"45111",Sunday:"65311",Rate:"17"}
]);
]]>
</fx:Script>

<mx:VBox width="100%" height="100%">
<mx:ColumnChart id="chart" width="100%" height="90%" showDataTips="true" fontSize="16" dataProvider="{gridArray}">
<!--设置水平坐标轴-->
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{}" categoryField="quarter"/>
</mx:horizontalAxis>
<!--设置左竖直坐标轴的最大值和最小值-->
<mx:verticalAxis>
<mx:LinearAxis minimum="0.00" maximum="100000.00"/>
</mx:verticalAxis>
<!--设置左竖直坐标轴的柱形图-->
<mx:series>
<mx:ColumnSeries id="column1" xField="quarter" yField="Monday" displayName="星期一"/>
<mx:ColumnSeries id="column2" xField="quarter" yField="Tuesday" displayName="星期二"/>
<mx:ColumnSeries id="column3" xField="quarter" yField="Wednesday" displayName="星期三"/>
<mx:ColumnSeries id="column4" xField="quarter" yField="Thursday" displayName="星期四"/>
<mx:ColumnSeries id="column5" xField="quarter" yField="Friday" displayName="星期六"/>
<mx:ColumnSeries id="column6" xField="quarter" yField="Saturday" displayName="星期七"/>
<mx:ColumnSeries id="column7" xField="quarter" yField="Sunday" displayName="星期八"/>
</mx:series>
<!--设置右竖直坐标轴的最大值和最小值-->
<mx:secondVerticalAxis>
<mx:LinearAxis minimum="0.00" maximum="100.00"/>
</mx:secondVerticalAxis>
<!--设置右竖直坐标轴的折线-->
<mx:secondSeries>
<mx:LineSeries id="line" dataProvider="{gridArray}" xField="quarter" yField="Rate" displayName="比率"/>
</mx:secondSeries>
</mx:ColumnChart>
<!--设置Legend属性-->
<mx:HBox>
<s:Label width="25"/>
<mx:Legend dataProvider="{chart}" fontSize="20" width="100%" height="30" direction="horizontal" horizontalGap="45" verticalGap="45"/>
</mx:HBox>

</mx:VBox>
</s:Application>

3、显示结果

时间: 2024-10-22 07:50:25

Flex实现双轴组合图的设计思路及代码_Flex的相关文章

Flex 全屏组件 部分全屏的实现代码_Flex

下面发布一下,将特定组件全屏的现在代码: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">     <mx:TitleWindow x="113" y="62&quo

Flex DataGrid 伪合并单元格思路及代码_Flex

复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx

FLEX给页面添加滚动条实现思路及代码_Flex

修改index.template.html,加入一段js获取浏览器窗口的宽高,根据浏览器窗口宽高修改css样式,html, body { height:100%; width:100%; }的height和width是百分比还是具体大小,当是具体大小时就会出现滚动条,当是百分比时就会充满整个窗口. 具体如下: 1.加入以下js原码(Application大小为1100X600) 复制代码 代码如下: var winWidth = 0; var winHeight = 0; function fi

wps表格制作双轴图表之线柱图

  今天小编为大家介绍一下如何在wps表格中制作双轴图表之线柱图,希望对大家有帮助.     表格制作         注:更多请关注电脑教程栏目,三联电脑办公群:189034526欢迎你的加入

字体图形化设计:字体图形化设计的方法与技巧

网页制作Webjx文章简介:字体图形化设计在具体设计过程中应注意的点. PART1:为什么要字体图形化设计 现代设计中直接从电脑里调出来的千遍一律的标准字体已经不能满足互联网用户日渐提高的审美需求,所以设计师要打破常规,能根据不同的需求,对字体进行独特的个性化的设计.同时字体的图形化设计有利于页面f氛围的营造以及更好的传递产品的特性以及功能等,特别是在推广页面设计的时候我们对标题文案(往往概括了整个活动的专题商业需求)进行特殊的设计处理,与其他的内容文案形成对比,引起用户的知觉兴趣,从而达到让用

设计感悟:字体图形化设计的方法与技巧

网页制作Webjx文章简介:字体图形化在设计中的应用. PART1:为什么要字体图形化设计 现代设计中直接从电脑里调出来的千遍一律的标准字体已经不能满足互联网用户日渐提高的审美需求,所以设计师要打破常规,能根据不同的需求,对字体进行独特的个性化的设计.同时字体的图形化设计有利于页面f氛围的营造以及更好的传递产品的特性以及功能等,特别是在推广页面设计的时候我们对标题文案(往往概括了整个活动的专题商业需求)进行特殊的设计处理,与其他的内容文案形成对比,引起用户的知觉兴趣,从而达到让用户有效的了解页面

利用Flex组件birdeye绘制拓扑关系图

原文:利用Flex组件birdeye绘制拓扑关系图 birdeye绘制拓扑关系图 1.flex简单介绍 Flex 是一个高效.免费的开源框架,可用于构建具有表现力的 Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器.桌面和操作系统.虽然只能使用 Flex 框架构建 Flex应用程序,但Adobe Flash Builder(之前称为 Adobe Flex Builder)软件可以通过智能编码.交互式遍历调试以及可视设计用户界面布局等功能

双金组合打造《双城生活》马伊琍涂松岩床戏多

新浪娱乐讯 <婆婆媳妇小姑>.<媳妇的美好时代>的编剧王丽萍和<北风那个吹>.<小姨多鹤>.<雪花那个飘>的导演安建担任主创,马伊琍.涂松岩主演的家庭情感剧<双城生活>日前正在热拍.10月27日,该剧在北京举行媒体见面会.王丽萍居然大曝马伊琍和涂松岩"床戏多",引人无限遐想. 双金组合 双城特色 金牌编剧王丽萍和金牌导演安建被称为"双金"组合,两人之前的诸多作品都成为电视剧精品,让人有理由期待这

设计技巧:字体图形化设计

文章描述:字体图形化设计小谈. 当你在做设计的时候碰到一个标题, 你会怎么做? 翻字库?一遍一遍试各种字体? 来看看大湿都是怎么做的吧. 图形化视频 文字是一种记录与传达语言的符号,它的产生是人类文明进步的一种重要标志.随着图形化时代的来临,文字与图形的关系在设计领域尤其是平面设计当中,起着举足轻重的作用.针对目前国际平面设计界以文字为主体元素的设计,本文以平面设计中文字的图形化表现为切入点,对文字图形化的表现形式和表现手法以及在平面设计的应用进行探讨性分析,希望挖掘出文字与图形化设计的更多表现