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>