水平軸または垂直軸に軸ラベルの値を定義します。軸ラベルの値は、系列で使用可能なデータを使用してカスタマイズできます。また、軸ラベルの値を完全に無効にすることもできます。

軸ラベルの無効化

ラベルを無効にするには、AxisRenderer オブジェクトで showLabels プロパティの値を false に設定します。次に例を示します。

<?xml version="1.0"?>
<!-- charts/DisabledAxisLabels.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Profit:2000, Expenses:1500},
            {Month:"Feb", Profit:1000, Expenses:200},
            {Month:"Mar", Profit:1500, Expenses:500}
        ]);
    ]]></mx:Script>
    <mx:Panel>
        <mx:ColumnChart id="column" dataProvider="{expenses}">
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    id="a1"
                    dataProvider="{expenses}" 
                    categoryField="Month"
                />
            </mx:horizontalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{a1}"                 
                    showLabels="false"
                />
            </mx:horizontalAxisRenderers>

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{a1}"                 
                    showLabels="false"
                />
            </mx:verticalAxisRenderers>

            <mx:series>
                <mx:ColumnSeries 
                    xField="Month" 
                    yField="Profit"
                    displayName="Profit"
                />
                <mx:ColumnSeries 
                    xField="Month" 
                    yField="Expenses"
                    displayName="Expenses"
                />
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{column}"/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

AxisRenderer を使用するときは常に、スタイルを適用する軸をレンダラーの axis プロパティで明示的に設定する必要があります。

軸ラベルのカスタマイズ

軸の labelFunction コールバック関数を使用することで、軸ラベルの値をカスタマイズできます。labelFunction に指定された関数は、軸ラベルとして表示されるストリングを返します。

NumericAxis オブジェクト（DateTimeAxis クラス、LinearAxis クラス、LogAxis クラスなど）のコールバック関数のシグネチャは次のとおりです。

function_name(labelValue:Object, previousLabelValue:Object, axis:IAxis):return_type

CategoryAxis オブジェクトのコールバック関数のシグネチャは次のとおりです。

function_name(labelValue:Object, previousLabelValue:Object, axis:axis_type, labelItem:Object):return_type

次の表で、コールバック関数のパラメータについて説明します。

labelFunction を使用するときは、軸のクラスまたはチャートのパッケージ全体を次の例のように読み込む必要があります。

import mx.charts.*;

次の例では、水平方向の CategoryAxis オブジェクトに対して labelFunction を定義しています。この関数は、軸ラベルの末尾に '07 を付加します。その結果、Jan '07、Feb '07、Mar '07 のようなラベルが表示されます。垂直軸には LinearAxis を指定し、値にドル記号と桁区切り記号を追加するよう書式設定します。ラベル書式設定関数の戻り型はどちらも String です。

<?xml version="1.0"?>
<!-- charts/CustomLabelFunction.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
  import mx.charts.*;
  import mx.collections.ArrayCollection;

  [Bindable]
  public var expenses:ArrayCollection = new ArrayCollection([
     {Month: "Jan", Income: 2000, Expenses: 1500},
     {Month: "Feb", Income: 1000, Expenses: 200},
     {Month: "Mar", Income: 1500, Expenses: 500}
  ]);

  // This method customizes the values of the axis labels.
  // This signature (with 4 arguments) is for a CategoryAxis.
  public function defineLabel(
    cat:Object, 
    pcat:Object,
    ax:CategoryAxis,
    labelItem:Object):String 
  {
        // Show contents of the labelItem:
        for (var s:String in labelItem) {
            trace(s + ":" + labelItem[s]);
        }
        
        // Return the customized categoryField value:
        return cat + " '07";
        
        // Note that if you did not specify a categoryField, 
        // cat would refer to the entire object and not the
        // value of a single field. You could then access 
        // fields by using cat.field_name.
  }

  // For a NumericAxis, you do not use the labelItem argument.
  // This example uses a NumberFormatter to add a thousands
  // separator.
  public function defineVerticalLabel(
    cat:Object, 
    pcat:Object,
    ax:LinearAxis):String 
  {
        return "$" + numForm.format(cat);
  }

  ]]></mx:Script>
  
  <mx:NumberFormatter id="numForm" useThousandsSeparator="true"/>
  
  <mx:Panel>
     <mx:ColumnChart id="column" dataProvider="{expenses}">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                categoryField="Month"
                title="Expenses" 
                labelFunction="defineLabel"
           />
        </mx:horizontalAxis>

        <mx:verticalAxis>
            <mx:LinearAxis
                title="Income"
                minimum="0"
                maximum="2500"
                labelFunction="defineVerticalLabel"
            />
        </mx:verticalAxis>

        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Income"
                displayName="Income"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses"
                displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

前の例で、CategoryAxis に対して categoryField プロパティの値を指定しなかった場合、ラベル書式設定関数に渡される最初の引数は値ではなくオブジェクトになります。その場合は、オブジェクトにドリルダウンして、書式設定された String を返す必要があります。

AxisRenderer クラスの labelFunction プロパティを使用してラベルをカスタマイズすることもできます。これにより、複数の軸を使用している場合でもラベルを制御できます。AxisRenderer のラベル関数のコールバック関数シグネチャは次のとおりです。

function_name(axisRenderer:IAxisRenderer, label:String):String

このコールバック関数は IAxisRenderer 型の引数を受け取るので、この関数を使用するときは、次のように IAxisRenderer クラスを読み込む必要があります。

import mx.charts.chartClasses.IAxisRenderer;

次の例では、垂直軸レンダラーの 1 つで labelFunction プロパティの値を指定しています。指定された CMstoInches() 関数は、軸ラベルの単位をセンチメートルからインチに変換します。

<?xml version="1.0"?>
<!-- charts/CustomLabelsOnAxisRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">      
    <mx:Script>  
    <![CDATA[
        import mx.formatters.NumberFormatter;
        import mx.charts.chartClasses.IAxisRenderer;   
        import mx.collections.ArrayCollection;  
        
        private function CMstoInches(ar:IAxisRenderer, strCMs:String):String {
            var n:NumberFormatter = new NumberFormatter();
            n.precision = 1;
            return n.format((Number(strCMs) * 0.393700787).toString());
        }
        
        [Bindable]
        private var SampleHeightData:ArrayCollection = new ArrayCollection([
            { Age: "Birth", height: 53},
            { Age: "3", height: 57 },
            { Age: "6", height: 64 },
            { Age: "9", height: 70 },
            { Age: "12", height: 82 },
            { Age: "15", height: 88 }
        ]);
            
        [Bindable]
        private var HeightData:ArrayCollection = new ArrayCollection([
            { Age: "Birth", 5: 52, 10: 53, 25:54, 50:58, 75:60, 90:62, 95:63 },
            { Age: "3", 5: 56, 10: 57, 25:58, 50:62, 75:64, 90:66, 95:67 },
            { Age: "6", 5: 62, 10: 63, 25:64, 50:68, 75:70, 90:72, 95:73 },
            { Age: "9", 5: 66, 10: 67, 25:68, 50:72, 75:74, 90:76, 95:77 },
            { Age: "12", 5: 70, 10: 71, 25:72, 50:76, 75:80, 90:82, 95:83 },
            { Age: "15", 5: 74, 10: 75, 25:76, 50:80, 75:84, 90:86, 95:87 }
        ]);
    ]]>
    </mx:Script>
    
    <mx:Stroke id="s1" weight="1"  />
     
    <mx:Panel title="Multiple Axis Example, Boys: Age - Height percentiles" 
        height="100%" width="100%" layout="horizontal">          
        <mx:ColumnChart id="linechart" height="100%" width="100%"
            paddingLeft="5" paddingRight="5" 
            showDataTips="true" dataProvider="{HeightData}">

            <mx:seriesFilters>
                <mx:Array/>
            </mx:seriesFilters> 

            <mx:backgroundElements>
                <mx:GridLines direction="both"/>
            </mx:backgroundElements>    

            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    id="h1"
                    categoryField="Age" 
                    title="Age in Months" 
                    ticksBetweenLabels="false"
                />
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis 
                    id="v1" 
                    title="Height" 
                    baseAtZero="false"
                />
            </mx:verticalAxis>

            <mx:verticalAxisRenderers>                
                <mx:AxisRenderer 
                    axis="{v1}" 
                    placement="right"
                />
                <mx:AxisRenderer 
                    axis="{v1}" 
                    placement="right" 
                    labelFunction="CMstoInches" 
                    highlightElements="true"
                />
            </mx:verticalAxisRenderers>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer axis="{h1}" placement="bottom"/>
                <mx:AxisRenderer axis="{h1}" placement="top"/>
            </mx:horizontalAxisRenderers>

            <mx:series>
                <mx:LineSeries yField="5"  form="curve" displayName="5%"/>
                <mx:LineSeries yField="10" form="curve" displayName="10%"/>
                <mx:LineSeries yField="25" form="curve" displayName="25%"/>
                <mx:LineSeries yField="50" form="curve" displayName="50%"/>
                <mx:LineSeries yField="75" form="curve" displayName="75%"/>
                <mx:LineSeries yField="90" form="curve" displayName="90%"/>
                <mx:LineSeries yField="95" form="curve" displayName="95%"/>
                <mx:ColumnSeries displayName="Height of Child X" 
                    dataProvider="{SampleHeightData}" 
                    yField="height" 
                    fills="{[0xCC6600]}"
                />
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{linechart}"/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

軸ラベルをカスタマイズするもう 1 つの方法として、ラベル用のカスタムデータプロバイダを設定するという方法もあります。この方法が利用できるのは、軸の値に対して（NumericAxis クラスではなく）CategoryAxis を使用している場合です。詳細については、CategoryAxis クラスについてを参照してください。

PieChart コントロールでは、PieSeries クラスで定義したラベル関数を使用してラベルをカスタマイズできます。詳細については、PieChart コントロールでのデータラベルの使用を参照してください。

範囲の設定

軸の最小値、最大値および間隔は NumericAxis オブジェクトの設定に基づいて自動的に計算されますが、その値をオーバーライドすることもできます。チャートに表示されるデータの範囲を変更すると、目盛りの範囲も変更されます。

次の表で、軸の範囲を定義する軸のプロパティについて説明します。

次の例では、y 軸の範囲を定義しています。

<?xml version="1.0"?>
<!-- charts/LinearAxisSample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
     import mx.collections.ArrayCollection;
    
    [Bindable] 
    public var stocks:ArrayCollection = new ArrayCollection([ 
        {date:"2005/8/4", SMITH:37.23},
        {date:"2005/8/5", SMITH:56.53},
        {date:"2005/8/6", SMITH:17.67},
        {date:"2005/8/7", SMITH:27.72},
        {date:"2005/8/8", SMITH:85.23}
     ]);
  ]]>
  </mx:Script>

  <mx:LineChart id="mychart" 
    dataProvider="{stocks}" 
    showDataTips="true" 
    height="300" 
    width="400"
  >
     <mx:verticalAxis>
        <mx:LinearAxis 
            title="linear axis" 
            minimum="10" 
            maximum="100" 
            interval="10"
        />
     </mx:verticalAxis>

     <mx:horizontalAxis>        
        <mx:CategoryAxis categoryField="date"/>
     </mx:horizontalAxis>
     <mx:series>
        <mx:LineSeries 
            yField="SMITH" 
            displayName="SMITH close"
        />
     </mx:series>
  </mx:LineChart>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、y 軸の最小値は 10、最大値は 100、目盛りの間隔は 10 です。したがって、ラベルテキストは 10、20、30、40 …のようになります。

DateTimeAxis で最小値と最大値を設定するには、軸のタグで（String または Number ではなく）Date オブジェクトを使用する必要があります。詳細については、DateTimeAxis での最小値と最大値の設定を参照してください。

目盛りの長さや位置の設定の詳細については、目盛りの書式設定を参照してください。