加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Flex实现双轴条状图

发布时间:2020-12-15 03:36:37 所属栏目:百科 来源:网络整理
导读:1、问题背景 ? ? ?一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2、实现实例 ?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://

1、问题背景

? ? ?一般的,柱状图可以实现双轴图,但是如何实现双轴条状图?


2、实现实例

<?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%" 
			   creationComplete="initHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			[Bindable]
			private var chartArray:ArrayCollection = new ArrayCollection([
				{week:"星期一",snake:"5459",cow:"7845"},{week:"星期二",snake:"8956",{week:"星期三",snake:"3562",{week:"星期四",snake:"7856",{week:"星期五",snake:"1245",{week:"星期六",snake:"9656",{week:"星期日",snake:"6784",cow:"7845"}
			]);

			protected function initHandler(event:FlexEvent):void
			{
				cate.ticksBetweenLabels = false;
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<mx:VBox width="100%" height="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="20"
			 paddingTop="10">
		<mx:BarChart id="barchart" width="100%" height="90%" showDataTips="true" dataProvider="{chartArray}">
			<mx:verticalAxis>
				<mx:CategoryAxis id="cate" categoryField="week" displayName="星期" />
			</mx:verticalAxis>
			
			<mx:series>
				<mx:BarSeries displayName="蛇数量" xField="snake" yField="week"/>
			</mx:series>
			
			<mx:secondVerticalAxis>
				<mx:CategoryAxis categoryField="week" displayName="星期"/>
			</mx:secondVerticalAxis>
			
			<mx:secondSeries>
				<mx:LineSeries displayName="牛" xField="cow" yField="week"/>
			</mx:secondSeries>
			
		</mx:BarChart>
		<mx:Legend dataProvider="{barchart}"/>
	</mx:VBox>
	
</s:Application>

3、实现结果

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读