zoukankan      html  css  js  c++  java
  • Flex实现双轴条状图

    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",cow:"7845"},
    				{week:"星期三",snake:"3562",cow:"7845"},
    				{week:"星期四",snake:"7856",cow:"7845"},
    				{week:"星期五",snake:"1245",cow:"7845"},
    				{week:"星期六",snake:"9656",cow:"7845"},
    				{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、实现结果


  • 相关阅读:
    Python startswith()函数 与 endswith函数
    Oracle spool 小结
    表空间(TableSpace)
    Python logger模块
    Mysql rpm安装
    Python json与pickle
    Python 生成器总结
    Python 装饰器的总结
    eclipse 乱码问题总结
    Eclipse 中出现红色下划波浪线与红色感叹号
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314808.html
Copyright © 2011-2022 走看看