加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

flex chart中文旋转

发布时间:2020-12-15 05:07:03 所属栏目:百科 来源:网络整理
导读:? mx:horizontalAxisRenderer mx:AxisRenderer labelRotation="-45" / /mx:horizontalAxisRenderer ??? 将X轴的标注转转成45度,但是设置这个要使中文旋转的话,必须要设置一下字体才生效,要不然没有效果。 设置步骤如下: 1. 设置字体(从window系统中找到

?

<mx:horizontalAxisRenderer>

             <mx:AxisRenderer labelRotation="-45" /> 

</mx:horizontalAxisRenderer> 


??? 将X轴的标注转转成45度,但是设置这个要使中文旋转的话,必须要设置一下字体才生效,要不然没有效果。

设置步骤如下:

1. 设置字体(从window系统中找到 字体 STSONG.TTF或者FZYTK.TTF 放入项目中)

设置宋体:

	<fx:Style>
		@font-face 
		{
			src: url("asssets/STSONG.TTF");
 			font-family: EmbeddedArial;
			embedAsCFF: false;
		}
		
		.columnChart
		{
			font-family: EmbeddedArial;
			fontSize: 12px; 
			fontWeight:"normal"; 
		}
		
	</fx:Style>	 


? 或者设置成方正姚体

		@font-face 
		{
			src: url("asssets/FZYTK.TTF");
			font-family: myMyriad;
			embedAsCFF: false;
		}
		
		.columnChart
		{
			font-family: myMyriad;
			fontSize: 12px; 
		}

2. 完整的应用程序的代码如下

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<fx:Declarations>
		<mx:WipeUp id="myWipUp" duration="{duration}" />
	</fx:Declarations>
	
	<fx:Style>
		@font-face 
		{
			src: url("asssets/STSONG.TTF");
			font-family: EmbeddedArial;
			embedAsCFF: false;
		}
		
		.columnChart
		{
			font-family: EmbeddedArial;
			fontSize: 12px; 
			fontWeight:"normal"; 
		}
		
	</fx:Style>	 
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.graphics.Stroke;
			import mx.charts.renderers.CircleItemRenderer;
			import mx.graphics.Stroke;
			
			[Bindable]
			private var duration:int = 1000;	
			
			[Bindable]
			private var medalsAC:ArrayCollection = new ArrayCollection( [
				{ Station: "站点站点站点station1",up: 35,down:39 },{ Station: "站点站点站点Station2",up: 32,down:17},{ Station: "站点站点站点Station3",up: 27,down:27},{ Station: "站点站点站点Station4",{ Station: "站点站点站点Station5",{ Station: "站点站点站点Station6",{ Station: "站点站点站点Station7",{ Station: "站点站点站点Station8",{ Station: "站点站点站点Station9",{ Station: "站点站点站点Station10",{ Station: "站点站点站点Station11",{ Station: "站点站点站点Station12",]);
		
		]]>
	</fx:Script>
	
	<s:Panel title="线路分段评价" width="100%" height="100%">
		<s:VGroup width="100%" height="100%" textAlign="center" horizontalAlign="center">
			<mx:Label fontSize="16" text="线路分段评价" textAlign="center"/>
			<mx:Legend dataProvider="{colChar}" textAlign="center" direction="horizontal"/>
				
			<mx:ColumnChart styleName="columnChart" id="colChar" width="100%" height="100%" paddingLeft="5" paddingRight="5" showDataTips="true" 
							dataProvider="{medalsAC}" columnWidthRatio="0.3" maxColumnWidth="50" showLabelVertically="true" selectionMode="single">
				<mx:horizontalAxis>
					<mx:CategoryAxis categoryField="Station" title="城市" />
				</mx:horizontalAxis>
				<mx:horizontalAxisRenderer>
					<mx:AxisRenderer labelRotation="45" />
				</mx:horizontalAxisRenderer>

				<mx:verticalAxis>
					<mx:LinearAxis title="数据量"/>
				</mx:verticalAxis>
				<mx:backgroundElements>
					<mx:GridLines horizontalStroke="{new Stroke(0xADD8E6,0)}"/>
				</mx:backgroundElements>
				<mx:series>
					<mx:ColumnSeries yField="up" displayName="上行"  labelPosition="outside" creationCompleteEffect="{myWipUp}"/>
					<mx:ColumnSeries yField="down" displayName="下行"   labelPosition="outside" creationCompleteEffect="{myWipUp}"/>
				</mx:series>
			</mx:ColumnChart>
		</s:VGroup>
	</s:Panel>
	
</s:Application>


3.旋转成功,展示图

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读