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，那么显示的结果会是：

效果出来了；