`

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>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics