0

我正在为我的 CategoryAxis 使用带有 rotateLabels canDropLabels 的 AxisRenderer，并且标签看起来很微观。我可以很好地显示其他所有标签，但标签不会放大。我在下面提供了一个完整的例子。如果您需要 Ubuntu 字体，您可以在此处下载或使用您自己的字体。CategoryAxis 应该每 3 个标签显示一次。

<?xml version="1.0"?>
<!-- Derrived From: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_06.html -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                initialize="init(event)" width="90%" height="60%">
  <mx:Style>
    @namespace mx "http://www.adobe.com/2006/mxml";
    @font-face{
      src: url("../assets/Ubuntu.ttf");
      fontFamily:Ubuntu;
      embedAsCFF:false;
      advancedAntiAliasing:true;
    }
    mx|ColumnChart {
      fontFamily:Ubuntu;
    }
  </mx:Style>
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.events.FlexEvent;
      import mx.formatters.DateFormatter;

      public static const msPerSecond:uint = 1000;
      public static const msPerMinute:uint = msPerSecond * 60;
      public static const msPerHour:uint = msPerMinute * 60;
      public static const msPerDay:uint = msPerHour * 24;
      public static const msPerWeek:uint = msPerDay * 7;

      protected var formatter:DateFormatter;

      private var currIndex:uint = 0;

      [Bindable]
      public var expenses:ArrayCollection;

      protected function init(event:FlexEvent):void {
        formatter = new DateFormatter();
        formatter.formatString = 'MM/DD';
        generateExpenses();
      }

      private function generateExpenses():void {
        var now:Date = new Date(), d:Date;
        expenses = new ArrayCollection();
        // The next 60 days inclusive
        for (var i:uint = 0; i < 60; i++) {
          d = new Date();
          d.time = now.time+i*msPerDay;
          var r:uint = rand(100, 1000);
          var o:uint = rand(1, 100);
          expenses.addItem({
            'date':d,
            'profit':r,
            'expenses':rand(r-o, r+o)
          });
        }
      }

      public function categoryLabel(val:Object, prev:Object,
          axis:CategoryAxis, item:Object):String {
        var index:uint = currIndex;
        currIndex++;
        return showLabel(index, axis.dataProvider.length, 20) ?
          formatter.format(val) : '';
      }

      private function rand(lb:int, ub:int):Number {
        return Math.floor(Math.random() * (1 + ub - lb)) + lb;
      }

      private function showLabel(index:uint, max:uint, interval:uint):Boolean {
        return index % int(Math.ceil(max/interval)) == 0;
      }
    ]]>
  </mx:Script>

  <!-- Define custom colors for use as column fills. -->
  <mx:SolidColor id="sc1" color="0x00FF00" alpha=".3"/>
  <mx:SolidColor id="sc2" color="0xFF0000" alpha=".3"/>

  <!-- Define custom Strokes for the columns. -->
  <mx:SolidColorStroke id="s1" color="0x00FF00" weight="2"/>
  <mx:SolidColorStroke id="s2" color="0xFF0000" weight="2"/>

  <mx:Panel title="ColumnChart Control with Custom Column Styles"
    width="100%" height="100%">
    <mx:HBox width="100%" height="100%">
      <mx:Legend dataProvider="{myChart}"/>
      <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"
          width="100%" height="100%" gutterBottom="50">
        <mx:horizontalAxis>
          <mx:CategoryAxis id="cAxis" dataProvider="{expenses}"
              categoryField="date" labelFunction="categoryLabel"/>
        </mx:horizontalAxis>
        <mx:horizontalAxisRenderers>
          <mx:AxisRenderer axis="{cAxis}" labelRotation="{-25}"
            canStagger="false" canDropLabels="true" fontSize="20"/>
        </mx:horizontalAxisRenderers>
        <mx:series>
          <mx:ColumnSeries 
            xField="date" 
            yField="profit"
            displayName="Profit"
            fill="{sc1}"
            stroke="{s1}"
            />
          <mx:ColumnSeries 
            xField="date" 
            yField="expenses"
            displayName="Expenses"
            fill="{sc2}"
            stroke="{s2}"
            />
        </mx:series>
        <mx:verticalAxis>
          <mx:LinearAxis id="lAxis"/>
        </mx:verticalAxis>
      </mx:ColumnChart>
    </mx:HBox>
  </mx:Panel>
</mx:Application>
4

1 回答 1

0

您好，请按如下方式修改您的代码：- CategoryAxis 将每 3 个标签显示一次。

<?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"
               initialize="init(event)" >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <mx:SolidColor id="sc1" color="0x00FF00" alpha=".3"/>
        <mx:SolidColor id="sc2" color="0xFF0000" alpha=".3"/>

        <!-- Define custom Strokes for the columns. -->
        <mx:SolidColorStroke id="s1" color="0x00FF00" weight="2"/>
        <mx:SolidColorStroke id="s2" color="0xFF0000" weight="2"/>
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @font-face{
            src: url("../assets/Ubuntu.ttf");
            fontFamily:Ubuntu;
            embedAsCFF:false;
            advancedAntiAliasing:true;
        }
        mx|ColumnChart {
            fontFamily:Ubuntu;
        }
    </fx:Style>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.formatters.DateFormatter;

            public static const msPerSecond:uint = 1000;
            public static const msPerMinute:uint = msPerSecond * 60;
            public static const msPerHour:uint = msPerMinute * 60;
            public static const msPerDay:uint = msPerHour * 24;
            public static const msPerWeek:uint = msPerDay * 7;

            protected var formatter:DateFormatter;

            private var currIndex:uint = 0;

            [Bindable]
            public var expenses:ArrayCollection;

            protected function init(event:FlexEvent):void {
                formatter = new DateFormatter();
                formatter.formatString = 'MM/DD';
                generateExpenses();
            }

            private var dataToShow:uint = 60;
            private function generateExpenses():void {
                var now:Date = new Date(), d:Date;
                expenses = new ArrayCollection();
                // The next 60 days inclusive
                for (var i:uint = 0; i < dataToShow; i++) {
                    d = new Date();
                    d.time = now.time+i*msPerDay;
                    var r:uint = rand(100, 1000);
                    var o:uint = rand(1, 100);
                    expenses.addItem({
                        'date':d,
                        'profit':r,
                        'expenses':rand(r-o, r+o)
                    });
                }
            }

            public function categoryLabel(val:Object, prev:Object,
                                          axis:CategoryAxis, item:Object):String {
                var index:uint = currIndex;
                currIndex++;
                return showLabel(index, axis.dataProvider.length, dataToShow) ?
                    formatter.format(val) : '';
            }

            private function rand(lb:int, ub:int):Number {
                return Math.floor(Math.random() * (1 + ub - lb)) + lb;
            }

            private function showLabel(index:uint, max:uint, interval:uint):Boolean {
                return index % int(Math.ceil(max/interval)) == 0;
            }
        ]]>
    </fx:Script>

    <mx:Panel title="ColumnChart Control with Custom Column Styles"
              width="100%" height="100%">
        <mx:HBox width="100%" height="100%">
            <mx:Legend dataProvider="{myChart}"/>
            <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"
                            width="100%" height="100%" gutterBottom="50">
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="cAxis" dataProvider="{expenses}"
                                     categoryField="date" labelFunction="categoryLabel"/>
                </mx:horizontalAxis>
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{cAxis}" labelRotation="{-25}"
                                     canStagger="false" canDropLabels="true" />
                </mx:horizontalAxisRenderers>
                <mx:series>
                    <mx:ColumnSeries 
                        xField="date" 
                        yField="profit"
                        displayName="Profit"
                        fill="{sc1}"
                        stroke="{s1}"
                        />
                    <mx:ColumnSeries 
                        xField="date" 
                        yField="expenses"
                        displayName="Expenses"
                        fill="{sc2}"
                        stroke="{s2}"
                        />
                </mx:series>
                <mx:verticalAxis>
                    <mx:LinearAxis id="lAxis"/>
                </mx:verticalAxis>
            </mx:ColumnChart>
        </mx:HBox>
    </mx:Panel>
</s:Application>
于 2013-04-09T07:24:16.333 回答