flex chart x轴字体倾斜显示开

最新推荐文章于 2020-09-18 16:34:59 发布

原创最新推荐文章于 2020-09-18 16:34:59 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

本文介绍如何处理Flex图表中X轴LABEL显示不全的问题，通过使用@font-face定义自定义字体并设置embedAsCFF属性为false，实现了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;
}