`

flex图表坐标轴样式设置

    博客分类:
  • flex
阅读更多
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				creationComplete="initApp()"
				backgroundColor="#FFFFFF" width="350" height="125"
				layout="absolute">
	<!-- 鼠标指中时候弹出提示框的样式,可根据个人情况而修改 -->
	<mx:Style>
         *{
           fontFamily:”Verdana”,”宋体”; 
            fontSize: 12;                       
        }
    </mx:Style>


	<mx:Script>
		<!--[CDATA[
			//导入相关包        
			import mx.collections.ArrayCollection;
			import mx.charts.*;
			import mx.charts.series.ColumnSeries;
			import mx.charts.series.BarSeries;
			import mx.charts.chartClasses.Series;
			import mx.collections.ArrayCollection;
			import mx.graphics.IFill;
			import mx.charts.ChartItem;
			import mx.charts.series.items.ColumnSeriesItem;
			import mx.charts.series.items.BarSeriesItem;
			import mx.charts.CategoryAxis;
			import mx.graphics.SolidColor;


			//颜色集合
			private var arrayColor:Array=["#FF8000", "#00FFFF"];

			private static var cnt:int=0;

			//定义生成柱状图的数组
			[Bindable]
			private var medalsAC:ArrayCollection=new ArrayCollection([{date: "重复信息", close: 28, open: 0}, {date: "全部信息", close: 0, open: 100}]);
			private var obj2:Array=[{xField: "close", displayName: "left"}, {xField: "open", displayName: "right"}];
			/**
			 * 初始化方法
			 */
			internal function initApp():void
			{

				//var aryDailyVoucher:Array=[{date: "type1", close: 41.71}, {date: "type12", close: 44},];
//				var obj2:Array=[{xField: "close", displayName: "left"}, {xField: "open", displayName: "right"}];
//				bar.dataProvider=medalsAC;
//				bar.verticalAxis=setCategoryAxis("date");
//				bar.series=setColumnSeries(obj2, "date");
//				bar.setStyle("barWidthRatio", 0.5);

			  	         
			}

//   	/** 
//	*设置颜色 
//	*/ 
			public function colorFillFunction(item:ChartItem, index:Number):IFill
			{
				cnt++;
				if (cnt % 2 == 0)
					return arrayColor[0];
				else
					return arrayColor[1];

			}

			public function myLabelFormat(obj:Object, pcat:Object, ax:LinearAxis):String
			{
				if (int(obj) > 100)
					return "";
				return numForm.format(obj) + "%";
			}

			public function myLabelDisplay(hd:HitData):String
			{
				//return "相似度:" + hd.item.close + "%";

				var curObj:Object=hd.item;
				var curSeries:BarSeries=BarSeries(hd.chartItem.element);
				if (curSeries.xField == "close")
					return "重复度:" + hd.item.close + "%";
				else
				   // return null;
					return "全部信息:" + hd.item.open + "%";

			}

			public function setCustomLabel(element:ChartItem, series:Series):String
			{
				var item:BarSeriesItem=BarSeriesItem(element);
				var ser:BarSeries=BarSeries(series);
				if (ser.xField == "close")
					return "重复度:" + item.xNumber + "%";
				//	return '<font color="#ff0000">' + "相似度:" + item.xNumber + "%" + '</font>';
				else
					return "";
				//return ser.xField.toString() + ":" + item.xNumber;
			}
     

		  private function myLabelFunction(element:ChartItem, series:Series):String {
		  	
		          trace("hello");
		          var item:BarSeriesItem = BarSeriesItem(element);
		          var ser:BarSeries = BarSeries(series);
		          return (ser.xField.toString() +":"+ item.xNumber);
		         
		     }

	   			// This method customizes the values of the axis labels.
			// This signature (with 4 arguments) is for a CategoryAxis.
			public function defineLabel(
				cat:Object, 
				pcat:Object,
				ax:CategoryAxis,
				labelItem:Object):String 
			{
				
				// Return the customized categoryField value:
				//return cat + "";
				
				return '<font size="20"><font color="#0B0B0B" weight="4">' + cat + '</font></font>';
				
				//'<font color="#ff0000">' + temp + </font>';
				//return null;

			}
			/**
			 *设置柱图形categoryField
			 */
			public function setCategoryAxis(categoryField:String):CategoryAxis
			{
				var ca:CategoryAxis=new CategoryAxis;
				ca.categoryField=categoryField;
				return ca;
			}

			/**
			 * 设置柱形X轴对应柱状数据
			 * xy数组必需为xy=[{yField:"Gold"},{yField:"Gold1"}]
			 * displayName要与setCategoryAxis的值对应
			 */
			public function setColumnSeries(xFieldArr:Object, yField:String):Array
			{
				arrayColor=new Array();
				var cs:BarSeries;
				var rsArr:Array=new Array;
				for (var i:int=0; i < xFieldArr.length; i++)
				{
					cs=new BarSeries();
					var xField:String=xFieldArr[i]["xField"];
					var color:String=xFieldArr[i]["color"];
					var displayName:String=xFieldArr[i]["displayName"];
					cs.name=new String(i);
					cs.displayName=displayName;
					cs.xField=xField;
					cs.yField=yField;
					cs.fillFunction=colorFillFunction;
					cs.labelFunction=myLabelFunction;
					cs.setStyle("labelPosition","outside");
					rsArr.push(cs);
					arrayColor.push(color);
				}
				return rsArr;
			}

			public function dataSourceChange(data:Object):void
			{

				medalsAC[0]["close"] = int(data);
				bar.dataProvider = medalsAC;
			}
		]]-->
	</mx:Script>

	<mx:NumberFormatter id="numForm"
						useThousandsSeparator="true"/>

	<!-- 横条的颜色 alpha为透明度,默认为.10 -->
    <!-- Define custom colors for use as fills. -->
    <mx:SolidColor id="sc1" color="#ff9f2c"/>
    <mx:SolidColor id="sc2" color="#73c9ec"/>

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="#ff9f2c" />
    <mx:Stroke id="s2" color="#73c9ec" />


	<!-- 调用dataTipFunction重写鼠标指中时弹出的提示信息 -->
	<mx:BarChart id="bar"
				 width="100%"
				 height="100%" paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0"
				 dataProvider="{medalsAC}"
				 dataTipFunction="myLabelDisplay"
				 showDataTips="true">

		<!-- background elements -->
		<!--
			 <mx:backgroundElements>
			 <mx:GridLines direction="vertical">
			 <mx:verticalFill>
			 <mx:SolidColor color="haloBlue" alpha="0.2" />
			 </mx:verticalFill>
			 <mx:verticalAlternateFill>
			 <mx:SolidColor color="haloSilver" alpha="0.2" />
			 </mx:verticalAlternateFill>
			 </mx:GridLines>
			 </mx:backgroundElements>
		-->
		<!-- 设置横坐标的最小刻度以及最大刻度,另外调用labelFunction重写刻度格式为百分比 -->
		<mx:horizontalAxis>
			<mx:LinearAxis minimum="0"
						   maximum="130"
						   labelFunction="myLabelFormat" id="a1"/>
		</mx:horizontalAxis>
		
		<mx:verticalAxis>
				<mx:CategoryAxis 
					categoryField="date" id="a2" labelFunction="defineLabel" />
			</mx:verticalAxis>
		
					 <mx:horizontalAxisRenderers>
                <mx:AxisRenderer axis="{a1}">
                    <mx:axisStroke>                   
                         <mx:Stroke color="#6E6E6E" 
                            caps="round"
                        /></mx:axisStroke>
                </mx:AxisRenderer>
            </mx:horizontalAxisRenderers>

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer axis="{a2}">
                    <mx:axisStroke>
                        <mx:Stroke color="#6E6E6E" 
                            caps="round" 
                        />
                    </mx:axisStroke>
                </mx:AxisRenderer>
            </mx:verticalAxisRenderers>
		
		<mx:series>
				<mx:BarSeries labelPosition="outside"  labelFunction="setCustomLabel" fontSize="10"
					xField="close" 
					yField="date"
					fill="{sc1}"
					/>
				<mx:BarSeries 	labelPosition="outside"  labelFunction="setCustomLabel"
					xField="open" 
					yField="date"
					fill="{sc2}"
					/>
			</mx:series>

	</mx:BarChart>
	<mx:Style>	
		
		BarChart {
			horizontalAxisStyleName:myAxisStyles;
			verticalAxisStyleName:myAxisStyles;
			
		}
		
		.myAxisStyles {
			tickPlacement:none;
			
		}
	</mx:Style>
</mx:Application>

 

分享到:
评论

相关推荐

    Flex画 坐标轴曲线 项目用过的 flex4 开发

    在Flex4开发中,创建坐标轴曲线图是一种常见的需求,特别是在数据可视化和图表展示的应用中。Flex是一个基于ActionScript和MXML的开放源代码框架,主要用于构建富互联网应用程序(RIA)。它提供了强大的图形和组件库...

    Flex漂亮的柱状图,横坐标倾斜45度显示amChart

    3. 设置数据源:将数据绑定到图表,可以是XML、JSON或者其他数据格式。 4. 自定义配置:根据需求调整坐标轴、图例、提示框等组件的样式和行为。 5. 添加到舞台:将图表添加到应用的显示列表中。 压缩包中的`charts`...

    flex线状图表展示源码

    6. **样式与皮肤**:Flex图表支持高度定制的样式和皮肤。开发者可以改变线条颜色、宽度,甚至自定义鼠标悬停、点击等交互时的外观。 7. **事件处理**:源码中可能会包含对图表事件的监听,如数据点的点击事件,以便...

    ArcGIS教程:Flex制作直观的交互式图表

    - **定义水平轴和垂直轴**:使用`&lt;mx:horizontalAxis&gt;`和`&lt;mx:verticalAxis&gt;`标签设置轴的标签、刻度线和数据位置。 - **定义样式**:通过horizontalAxisRenderers和verticalAxisRenderers属性控制数据在轴上的显示...

    flex Chart

    6. **样式和模板**:Flex Chart允许开发者通过CSS或MXML定义样式,自定义图表的颜色、边框、背景等外观,甚至可以创建自定义模板以改变图表的布局和行为。 7. **动画效果**:可以为图表添加平滑的动画效果,提高用户...

    flex实战报表:jFreeChart,cewolf,iText.doc

    - **cewolf简介**:cewolf是一个开源的Flex图表引擎,它通过AMF协议与Java后端进行通信,能够在Flex客户端直接渲染图表,减少了服务器端的负担。 - **cewolf配置**:配置主要包括设置AMF通道,确保Flex客户端与...

    flex3 画相位图

    5. **样式和效果**:使用Flex的样式和动画功能,可以为相位图添加颜色、阴影、渐变等视觉效果,提高图表的可读性和美观性。 6. **测试和优化**:在Flex模拟器或浏览器中预览应用程序,确保相位图正确显示并符合预期...

    Flex详细文档.pdf

    - **CSS**: CSS用于控制Flex应用程序中的样式和布局,可以通过外部.css文件或者内联样式来应用。 ##### 2. MXML与ActionScript的使用 - **MXML注释**: MXML中的注释使用`&lt;!-- 注释内容 --&gt;`的形式。 - **...

    FLEX画图之各种柱状图饼状图画法

    通过使用Flex的内置图表组件和自定义图形方法,开发者可以灵活地设计和定制图表,满足不同数据展示的需求。无论是简单的柱状图还是复杂的环形分块图,Flex都能够胜任,使得数据的呈现更加直观和生动。

    Flex 报表开发

    除了预设的图表类型,Flex还允许开发者通过扩展笛卡尔图表控件来创建自定义图表,这意味着可以无限发挥创意,根据具体需求定制图表样式和功能。例如,可以通过修改数据映射规则、调整视觉效果或增加交互性,使图表...

    flex工作流源码

    Flex工作流源码是基于Adobe Flex技术开发的一种工作流程管理系统的核心代码。Flex是一种用于构建富互联网应用程序(RIA)的开放源代码框架,它基于ActionScript编程语言和MXML标记语言,能够创建高度交互且功能丰富...

    flex开发实例

    - **图表绘制**:使用Flex可以轻松绘制各种图表,如饼图、柱状图等。 - **动画效果**:Flex支持创建复杂的动画效果,增强用户体验。 ### Flex for GIS开发 Flex还可以应用于地理信息系统(GIS)领域,利用其强大的...

    ArcGIS API for Flex 教程

    - 设置环境:配置 Flex 编译器路径,确保可以使用 Flex Builder 或命令行工具进行开发。 - 获取 ArcGIS API for Flex:从 Esri 官方网站下载 API 库,将其添加到 Flex 项目中。 3. **创建第一个地图应用** - ...

    Flex 雷达图自己写的

    你可以调整颜色、样式、数据点、轴的数量等,以适应不同的数据集和应用场景。 6. 总结 通过使用Flex,开发者可以利用其强大的图形渲染能力创建出具有吸引力的数据可视化工具,如雷达图和风行玫瑰图。结合提供的源...

    常用的9个JavaScript图表库详解

    可以通过npm安装Chartist,并通过编写CSS来自定义图表样式,提高图表的视觉吸引力。 3. FlexChart FlexChart是另一个图表库,它支持多种图表类型和灵活的图表设计。该库提供了丰富的配置选项和事件来帮助开发者定制...

    Flex 调用天地图路径规划接口

    4. **地图显示**:将路线信息映射到Flex地图组件上,可以使用Line或Polyline对象表示路线,设置不同的样式来区分公交、步行等不同交通方式。 5. **用户交互**:可能还需要添加点击事件监听,使用户能点击路线查看...

    Flex开发实例--学习必备

    - Flex的地图组件支持获取鼠标指针所在位置的坐标。 - 这对于实现位置相关的功能非常有用。 #### 8. 显示点击位置 - 当用户在地图上点击时,可以显示点击的位置。 - 有助于交互式地展示信息。 ### 实例开发 #### ...

    Flex开发实例.pdf

    - Flex支持使用CSS来定制界面样式,使得界面风格更加统一和美观。 #### 20. **数据验证** - Flex提供了丰富的数据验证机制,确保用户输入的数据符合预期。 #### 21. **打印** - Flex应用可以支持打印功能,允许...

    Flex基础入门与开发实例

    20. **绘制饼图**和**绘制柱状图**: 使用图表库可以轻松创建各种图表。 21. **简单动画效果**: Flex内置了丰富的动画效果,可以通过简单的API调用来实现。 #### 六、Flex for GIS开发 - **新建项目**: 创建一个新的...

Global site tag (gtag.js) - Google Analytics