flex chart x轴字体倾斜 显示开
解决图表X轴LABEL显示不开的问题:效果如下:
代码:
<?xml version="1.0"?> <!-- Simple example to demonstrate the GridLines class. --> <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"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var expensesAC:ArrayCollection = new ArrayCollection( [ { Month: "Jan 10:10:00", Profit: 2000, Expenses: 1500, Amount: 450 }, { Month: "Feb 10:10:00", Profit: 1000, Expenses: 200, Amount: 600 }, { Month: "Mar 10:10:00", Profit: 1500, Expenses: 500, Amount: 300 }, { Month: "Apr 10:10:00", Profit: 1800, Expenses: 1200, Amount: 900 }, { Month: "May 10:10:00", Profit: 2400, Expenses: 575, Amount: 500 } ]); ]]> </fx:Script> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace draw "draw.*"; @font-face { src:url("assets/font/arial.ttf"); font-family: EmbeddedArial; embedAsCFF:false; } mx|LineChart { fontFamily: EmbeddedArial; fontSize: 12px; } </fx:Style> <mx:Panel title="GridLines Example" height="100%" width="100%"> <mx:LineChart id="linechart" height="100%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{expensesAC}"> <mx:backgroundElements> <mx:GridLines gridDirection="horizontal"> <mx:horizontalStroke> <mx:SolidColorStroke weight="1"/> </mx:horizontalStroke> <mx:horizontalFill> <mx:SolidColor color="0xCCCCCC" alpha=".66"/> </mx:horizontalFill> </mx:GridLines> </mx:backgroundElements> <mx:horizontalAxis> <mx:CategoryAxis id="ca" categoryField="Month"/> </mx:horizontalAxis> <mx:horizontalAxisRenderers> <mx:AxisRenderer axis="{ca}" labelRotation="65" canDropLabels="true" /> </mx:horizontalAxisRenderers> <mx:series> <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/> <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/> <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/> </mx:series> </mx:LineChart> <mx:HBox width="100%" horizontalAlign="center"> <mx:Legend dataProvider="{linechart}" direction="horizontal" /> </mx:HBox> </mx:Panel> </s:Application>
注:
@font-face {
src:url("assets/font/arial.ttf"); //去C:/WINDOW/Fonts下边拷过来
font-family: EmbeddedArial;
embedAsCFF:false;
}