flex4.6 图表在module中 x轴旋转正确的做法

最新推荐文章于 2020-10-18 15:15:17 发布

weixin_33766805

最新推荐文章于 2020-10-18 15:15:17 发布

阅读量91

点赞数

1.必须嵌入字体并且吧字体在application中申明

<fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        
        @font-face{
            src: url("com/qijinsoft/assets/font/chart.ttf");
            fontFamily: myChartFont;
            embedAsCFF: false; 
        }
    </fx:Style>

2.在module中

<fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|LineChart {
            fontFamily: myChartFont;
            fontSize: 12;
        }
</fx:Style>

<mx:LineChart id="linechart" x="0" y="54" showDataTips="true" width="100%" height="85%" >
            <mx:horizontalAxis><!--表示横向坐标的序列字段-->
                <mx:CategoryAxis id="cdate" title="日期" categoryField="date" />
            </mx:horizontalAxis>
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer  axis="{cdate}" id="axisRender" labelAlign="bottom"  labelRotation="65"/>
            </mx:horizontalAxisRenderers>
            
            
            <mx:verticalAxis>
                <mx:LinearAxis title="人数"  baseAtZero="true" displayName="人数"/>
            </mx:verticalAxis>
            <mx:series>
                <mx:LineSeries displayName="充值人数" yField="loginnum" id="loginnum" showEffect="{wipe}" />
                <mx:LineSeries displayName="新增充值人数" yField="maxonline" id="maxonline"  showEffect="{wipe}"  />
            </mx:series>
        </mx:LineChart>
        <mx:Legend left="10" bottom="10" width="100%" height="25"  dataProvider="{linechart}"/>

这样就OK 了