HLOCChart コントロールは、データ系列の高値、安値、始値、終値などの財務データを一連の線で示します。垂直線の上端と下端はデータポイントの高値と安値を表し、左の目盛りは始値を、右の目盛りは終値を表します。

HLOCChart コントロールでは、始値を示すデータポイントは必須ではありません。関連するチャートとして、ローソク足とよく似たデータを示す CandlestickChart コントロールがあります。詳細については、ローソク足チャートの使用を参照してください。

HighLowOpenClose チャートのデータを定義するには、HLOCChart コントロールと共に HLOCSeries を使用します。次の例は HLOCChart コントロールを示します。

次の表で、HighLowOpenClose チャートの定義によく使用する HLOCChart コントロールの系列のプロパティについて説明します。

HLOCChart コントロールのデータポイントでは、openField プロパティは必須ではありません。openField プロパティを指定しない場合、データポイントは、終値を示す右向きのインジケータが 1 つ付加された線で表されます。openField プロパティを指定した場合は、次の図に示すように、左向きのインジケータがもう 1 つ追加されます。

次の例では、HLOCChart コントロールを作成します。

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

     [Bindable]
     public var TICKER:ArrayCollection = new ArrayCollection([
        {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
        {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
        {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
        {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
        {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
        {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
        {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
        {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
        {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
        {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
     ]);
  ]]></mx:Script>

  <mx:Panel title="HighLowOpenClose Chart">
     <mx:HLOCChart id="myChart" 
        dataProvider="{TICKER}" 
        showDataTips="true"
     >
        <mx:verticalAxis>
           <mx:LinearAxis minimum="30" maximum="50"/>
        </mx:verticalAxis>
        <mx:series>
           <mx:HLOCSeries
                dataProvider="{TICKER}"
                openField="open"
                highField="high"
                lowField="low"
                closeField="close"
                displayName="TICKER"
            >
           </mx:HLOCSeries>
        </mx:series>
     </mx:HLOCChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

垂直線の太さを変更するには、データ系列で Stroke オブジェクトを使用します。垂直線の始値と終値を示す目盛りの外観を変更するには、openTickStroke スタイルプロパティと closeTickStroke スタイルプロパティを使用します。次の例では、垂直線の太さをデフォルト値の 1 から 2 に変更し、線の色をすべて黒に設定しています。

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

     [Bindable]
     public var TICKER:ArrayCollection = new ArrayCollection([
        {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
        {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
        {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
        {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
        {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
        {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
        {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
        {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
        {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
        {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1},
     ]);
  ]]></mx:Script>

  <mx:Panel title="HLOC Chart">
     <mx:HLOCChart id="myChart" 
        dataProvider="{TICKER}" 
        showDataTips="true"
     >
        <mx:verticalAxis>
           <mx:LinearAxis minimum="30" maximum="50"/>
        </mx:verticalAxis>
        <mx:series>
           <mx:HLOCSeries
                dataProvider="{TICKER}"
                openField="open"
                highField="high"
                lowField="low"
                closeField="close"
                displayName="TICKER"
            >
            <mx:stroke>
                <mx:Stroke color="#000000" weight="2"/>
            </mx:stroke>
            <mx:closeTickStroke>
                <mx:Stroke color="#000000" weight="1"/>
            </mx:closeTickStroke>
            <mx:openTickStroke>
                <mx:Stroke color="#000000" weight="1"/>
            </mx:openTickStroke>
           </mx:HLOCSeries>
        </mx:series>
     </mx:HLOCChart>
     </mx:Panel>
     <mx:Legend dataProvider="{myChart}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。