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

原文： http://blog.csdn.net/ld_flex/article/details/5973488

例子：

在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>