flex chart y坐标显示在右边（图）

 

如题：见图

代码如下

<?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" minWidth="955" minHeight="600"  creationComplete="init()">

<s:layout>

<s:BasicLayout/>

</s:layout>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

<mx:SeriesSlide id="show" duration="1000" direction="right"/>

<!-- 填充颜色 -->

<s:SolidColor id="sc1" color="yellow" alpha=".8"/>

<!-- 边框颜色 -->

<s:SolidColorStroke id="s1" color="yellow" weight="2"/>

 

<s:RadioButtonGroup id="daytype" itemClick="kindChange(event)"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.controls.Alert;

import mx.events.ItemClickEvent;

private var urlloader:URLLoader;

private var numRanking:Number = 10; //排名多少

private var rankXFiled:String ="@value" ; //yfield显示值

[Bindable]private var colorArray:Array =[0x99cccc,0xccccff,0x66cc99,0xff9966,0x336699,0x003300,0xcccccc,0xcccc33,0xcc9933,0xcc99cc];

private var urlloaderUrl:String ="http://localhost:23584/CountChart/getProductSaleRanking.aspx?"+Math.random()*1000;

private function init():void{

getData( numRanking ); //获取数据

}

//获取数据

private function getData(pageSize:Number):void{

urlloader = new URLLoader();

var request:URLRequest = new URLRequest( urlloaderUrl );

request.method = URLRequestMethod.POST;

var variable:URLVariables = new URLVariables();

variable.pageSize = pageSize;

request.data = variable;

urlloader.addEventListener(Event.COMPLETE,onComplete);

urlloader.addEventListener(IOErrorEvent.IO_ERROR,ioError);

urlloader.load(request);

}

//获取数据失败

private function ioError(event:IOErrorEvent):void{

Alert.show(" get data failed");

}

//获取数据成功

private function onComplete(event:Event):void{

var xs:XMLList = new XMLList(); //查询数据

var _dp:ArrayCollection = new ArrayCollection();

xs = XML(event.target.data).node;

for each (var xl:XML in xs.row){

_dp.addItem(xl);

}

BindData(_dp); //绑定数据

}

//绑定数据

private function BindData(x:ArrayCollection):void{

rank.xField= rankXFiled;

rank.setStyle("labelPosition", "none");

rank.setStyle("labelAlign", "right");

rank.setStyle("labelRotation",90);

bar.dataProvider = x;

rank.dataProvider = x;

}

//按选择时期获得数据

private function kindChange(event:ItemClickEvent):void{

switch (event.currentTarget.selectedValue){

 

case "perThree":

numRanking = 3;

break;

case "perFive":

numRanking = 5;

break;

case "perTen":

numRanking = 10;

break;

}

getData( numRanking ); //重新获取数据

}

]]>

</fx:Script>

<s:Label id="txt" text="销售排行" x="100" fontSize="18" y="10" fontWeight="bold"/>

<mx:BarChart id="bar" height="300" width="300" y="50" selectionMode="single"

paddingLeft="5" paddingRight="5" barWidthRatio=".3"  

showDataTips="true">

<mx:verticalAxis>

<mx:CategoryAxis id="vAxis" categoryField="@title" title="商品名称"/>

</mx:verticalAxis>

<mx:horizontalAxis>

<mx:LinearAxis title="销售量" id="hAxis" direction="inverted" interval="1"/>

</mx:horizontalAxis>

 

 

<mx:horizontalAxisRenderers>

<mx:AxisRenderer axis="{hAxis}" fontSize="12"/>

</mx:horizontalAxisRenderers>

<mx:verticalAxisRenderers>

<mx:AxisRenderer 

axis="{vAxis}" 

placement="right"  fontSize="12" 

highlightElements="true"

/>

</mx:verticalAxisRenderers>

<mx:series>

<mx:BarSeries id="rank" showDataEffect="{show}"

 yField="@title"  

 displayName="商品名称"

 stroke="{s1}"

 ><!--itemRenderer="model.CustomSeriesRenderer"-->

<mx:fills>

<fx:Array>

<!-- 填充颜色 -->

<s:SolidColor color="{colorArray[0]}" alpha=".6"/>

<s:SolidColor  color="{colorArray[1]}" alpha=".6"/>

<s:SolidColor color="{colorArray[2]}" alpha=".6"/>

<s:SolidColor color="{colorArray[3]}" alpha=".6"/>

</fx:Array>

</mx:fills>

</mx:BarSeries>

</mx:series>

</mx:BarChart>

<s:RadioButton x="10" groupName="daytype"  id="perThree" value="perThree" y="369" label="前三名"/>

<s:RadioButton x="87" groupName="daytype" id="perFive"  value="perFive" y="369" label="前五名" selected="true"/>

<s:RadioButton x="176" groupName="daytype"  id="perTen"  value="perTen" y="369" label="前十名"/>

</s:Application>