Flex中要想使图表的横坐标轴标签成45度显示

例子：

 

在Flex中要想使图表的横坐标轴标签成45度显示，必须使用渲染器+导入外部字体的方式。缺一不可。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Style> 

  @font-face{

fontFamily: EmbeddedArial;

src: url("./assets/FZYTK.TTF");  //注意：这里不可以写中文，如需导入中文字体，请使用中文字体的英文名字                                                                                    如：FZYaoti方正姚体; 将FZYTK.TTF字体放在src/assets文件夹下

}

LineChart{

fontFamily: EmbeddedArial;

}

</mx:Style> 

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

        [Bindable]

        private var expensesAC:ArrayCollection = new ArrayCollection( [

            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },

            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },

            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },

            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },

          { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);

]]>

</mx:Script>

<mx:Stroke id="s1" color="blue" weight="5"/>

<mx:Stroke id="s2" color="red" weight="5"/>

<mx:Stroke id="s3" color="green" weight="5"/>

<mx:Panel title="LineChart" width="100%" height="100%" layout="horizontal"> 

<mx:LineChart id="lineChart" showDataTips="true"

paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

dataProvider="{expensesAC}">

<mx:horizontalAxis>

<mx:CategoryAxis id="datetime_axis" categoryField="Month"/>

</mx:horizontalAxis>

<mx:horizontalAxisRenderers>

<mx:AxisRenderer 

axis="{datetime_axis}" 

labelRotation="45"

canDropLabels="false" 

canStagger="true">

</mx:AxisRenderer>

</mx:horizontalAxisRenderers>

<mx:series>

<mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>

<mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>

<mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>

</mx:series>

</mx:LineChart>

<mx:Legend dataProvider="{lineChart}"/>

</mx:Panel>

</mx:Application>