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

最新推荐文章于 2021-02-04 01:33:13 发布

ld_flex

最新推荐文章于 2021-02-04 01:33:13 发布

阅读量5.3k

点赞数

分类专栏： flex 文章标签： flex application url

本文链接：https://blog.csdn.net/ld_flex/article/details/6657076

版权

flex 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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>

<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.也许有些人会说，我想要的效果还是没出来
注意，