Flex4(Flash Builder 4)如何旋转图表横纵坐标的label

代码如下：
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face {
src:url("assets/font/arial.ttf");
font-family: EmbeddedArial;
embedAsCFF:false;
}

mx|LineChart {
fontFamily: EmbeddedArial;
fontSize: 12px;
}
</fx:Style>

<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}" labelRotation="-45"  canDropLabels="true" axisStroke="{axis}"  placement="bottom"  tickLength="5" tickPlacement="outside"  minorTickLength="2" minorTickPlacement="inside" labelGap="0"  >
<mx:tickStroke>{ticks}</mx:tickStroke>
<mx:minorTickStroke>{mticks}</mx:minorTickStroke>
    </mx:AxisRenderer>
</mx:horizontalAxisRenderers>

注意网上常见的
        @font-face {
            src: local("Arial");
            font-family: EmbeddedArial;
         }
local("Arial")在Flash Builder4中的写法是错误的，俺也不知道怎样才能方便快捷引用系统的字体，模仿官方例子，把系统目录C:\WINDOWS\Fonts下的arial.ttf拷贝了一份放到项目的assets/font/下。

贴上官方的例子供大家参考：

Rotating chart axis labels

<?xml version="1.0"?>
<!-- charts/RotateAxisLabels.mxml -->
<s:Application
   xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:s="library://ns.adobe.com/flex/spark"
   creationComplete="srv.send()"
   height="600">

   <fx:Declarations>
       <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
       <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
       <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx --> 
   </fx:Declarations>

<fx:Style>
    @namespace mx "library://ns.adobe.com/flex/mx";

    @font-face{
       src: url("../assets/MyriadWebPro.ttf");
       fontFamily: myMyriad;
       embedAsCFF: false;
    }

    mx|ColumnChart {
       fontFamily: myMyriad;
       fontSize: 20;
    }
</fx:Style>

   <s:layout>
       <s:VerticalLayout/>
   </s:layout>

<s:Panel title="Rotated Axis Labels">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <mx:ColumnChart id="column"
       dataProvider="{srv.lastResult.data.result}"
       showDataTips="true">
       <mx:horizontalAxis>
          <mx:CategoryAxis id="a1"
               categoryField="month"
               title="FY 2010"/>
       </mx:horizontalAxis>

       <mx:verticalAxis>
          <mx:LinearAxis id="a2"/>
       </mx:verticalAxis>

       <mx:horizontalAxisRenderers>
          <mx:AxisRenderer labelRotation="-90" axis="{a1}"/>
       </mx:horizontalAxisRenderers>

       <mx:verticalAxisRenderers>
          <mx:AxisRenderer labelRotation="45" axis="{a2}"/>
       </mx:verticalAxisRenderers>

       <mx:series>
          <mx:ColumnSeries displayName="Profit"
               xField="month"
               yField="profit"/>
          <mx:ColumnSeries displayName="Expenses"
               xField="month"
               yField="expenses"/>
       </mx:series>
    </mx:ColumnChart>
    <mx:Legend dataProvider="{column}"/>
</s:Panel>
</s:Application>

http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf65816-7fe5.html

评论

1 楼 Majesty123456 2014-05-09