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

