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.旋转成功,展示图 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |