flex ColumnChart的横坐标标签45度要点及注意事项

?1.先写样式，无论是外部样式，还在内部样式

@font-face {
??? src: local("Arial");
??? font-family: EmbeddedArial;
}
.chart {
??? font-family: EmbeddedArial;
}

其中，local表示在本地查找Arial的字体样式；另一种用路径的方式为：? src: url(".assets/font/FZYTK.TTF");在本地assets目录下的font文件夹里查找“方正姚体”样式；这里要用英文； 可以直接将本地电脑里面的字体文件直接复制到font文件夹下。

这里，.chart是样式别名，当某个图表需要用到该样式的时候，只需要styleName="chart"则可调用；而如果使用ColumnChart{font-family: EmbeddedArial;} 则表示对所有柱状图有效；或者BarChart{font-family: EmbeddedArial;} 同意；

?

如果是内部样式，则该样式格式是：

<mx:Style>

@font-face {
??? src: local("Arial");
??? font-family: EmbeddedArial;
}
.chart {
??? font-family: EmbeddedArial;
}

</mx:Style>

并且一定写在主应用程序Application文件中（mx:Application所在标签内）

?

2.程序代码如下：

<mx:ColumnChart id="columnChart" height="100%" width="100%"
paddingBottom="5" paddingLeft="5" paddingRight="5"
paddingTop="5" showDataTips="true"
type="stacked" styleName="chart">
<mx:backgroundElements>
?<mx:GridLines id="gridLines" direction="horizontal">
???? <mx:horizontalStroke>
???????? <mx:Stroke color="0x888888" weight="0" alpha="1.0" />
???? </mx:horizontalStroke>
?</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxisRenderer>
??? <mx:AxisRenderer tickLength="2" labelRotation="45">
??????? <mx:axisStroke>
??????????? <mx:Stroke weight="1" color="0x888888" />
??????? </mx:axisStroke>???????????
??????? <mx:tickStroke>
??????????? <mx:Stroke weight="1" color="0x888888" />???????????????????????
??????? </mx:tickStroke>???????
??? </mx:AxisRenderer>
</mx:horizontalAxisRenderer>
<mx:verticalAxisRenderer>
??? <mx:AxisRenderer tickLength="2">
??????? <mx:axisStroke>
??????????? <mx:Stroke weight="1" color="0x888888" />
??????? </mx:axisStroke>???????????
??????? <mx:tickStroke>
??????????? <mx:Stroke weight="1" color="0x888888" />???????????????????????
??????? </mx:tickStroke>???????
??? </mx:AxisRenderer>???????????????
</mx:verticalAxisRenderer>?????????????????????
?? <mx:horizontalAxis>
?<mx:CategoryAxis id="dateAxis"?categoryField="@date"/>
</mx:horizontalAxis>
<!-- series -->
<mx:series>
??? <mx:ColumnSeries yField="okl" displayName="obp" />
??? <mx:ColumnSeries yField="slg" displayName="slg" />
??? <mx:ColumnSeries yField="avg" displayName="avg" />
</mx:series>
</mx:ColumnChart>

这里注意<mx:horizontalAxisRenderer>与<mx:horizontalAxisRenderers>的区别，多一个s；

这里如果使用<mx:horizontalAxisRenderers>这个标签的话，里面的<mx:AxisRenderer tickLength="2"labelRotation="45">必须添加一个属性值axis="{dateAxis}"调头相应横坐标的id；则完整代码为<mx:AxisRenderer tickLength="2"labelRotation="45" axis="{dateAxis}">，如果不添加该属性，则允许该程序时报错。

?

3.也许有些人会说，我想要的效果还是没出来
注意，

如果你选择的是RSL，那么显示的结果会是：

如果你选择的是Merged into Code，那么显示的结果会是：