Flex 2 개발 가이드 > 차트 컴퍼넌트 > 차트의 서식 설정 > 칠의 사용

칠의 사용

복수의 데이터 계열을 차트에 나타낼 때, 또는 단지 차트의 외관을 보기 쉽게 하기 위해서, 차트의 각 계열에 대해 칠을 제어할 수가 있습니다. 칠에서는, 차트 엘리먼트의 묘화 방법을 정의하는 패턴을 지정할 수가 있습니다. 또, 칠을 사용해, 차트의 배경색이나, 그리드선으로 정의하는 배경색의 area를 지정할 수도 있습니다. 칠은 단색으로 하는 일도, 선상이나 방사상의 칠을 사용할 수도 있습니다. "그라데이션 " 에서는, 칠의 색에 있어서의 단계적인 색의 변화를 지정합니다.

칠의 특성을 정의하려면 , 차트 계열의 fill properties 를 사용합니다. fill properties 의 설정은,LineSeries 오브젝트와 LineRenderer 오브젝트에는 영향을 주지 않습니다. PieSeries 오브젝트에서는, 단일의 fill properties 대신에 fill 의 배열을 사용할 수 있습니다.

칠의 가장 일반적인 사용법의 1 개는, 차트에 복수의 데이터 계열이 있을 때 차트의 색을 제어하는 것입니다. 다음의 예에서는,fill properties 를 사용해, ColumnChart 컨트롤의 각각의 ColumnSeries 오브젝트에 색을 설정해 있습니다. 

<mx:ColumnChart id="chart" dataProvider="{dataSet}">
    <mx:series>
        <mx:ColumnSeries yField="Newton">
            <mx:fill>
                <mx:SolidColor color="0x336699"/>
            </mx:fill>
        </mx:ColumnSeries>
        <mx:ColumnSeries yField="San Francisco">
            <mx:fill>
                <mx:SolidColor color="0xFF99FF"/>
            </mx:fill>
        </mx:ColumnSeries>
    </mx:series>
</mx:ColumnChart>

복수의 데이터 계열에 대해서 다른 칠을 명시적으로 정의하지 않는 경우는, 자동적으로 단색이 사용됩니다.

PieSeries 에서는, 칠의 배열을 사용해 개개의 구분의 묘화 방법을 지정할 수가 있습니다. 예를 들어, 다음의 예의 같게, PieSeries 를 나타내는 각 구분에 독자적인 색을 지정할 수가 있습니다. 

<mx:PieChart id="chart" dataProvider="{expenses}" showDataTips="true">
    <mx:series>
        <mx:PieSeries field="Amount" displayName="Amount" nameField="Expense">
            <mx:fills>
                    <mx:SolidColor color="0xCC66FF" alpha=". 8"/>
                    <mx:SolidColor color="0x9966CC" alpha=". 8"/>
                    <mx:SolidColor color="0x9999CC" alpha=". 8"/>
                    <mx:SolidColor color="0x6699CC" alpha=". 8"/>
                    <mx:SolidColor color="0x669999" alpha=". 8"/>
                    <mx:SolidColor color="0x99CC99" alpha=". 8"/>
            </mx:fills>
        </mx:PieSeries>
    </mx:series>
</mx:PieChart>

또, 칠을 사용해, 차트의 배경색을 설정할 수도 있습니다. 이것은, 다음의 예와 같이, 차트의 태그에 <mx:fill> 자 태그를 추가하는 것에 의해 실시합니다. 

<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    import mx.collections.ArrayCollection;
    [Bindable]
    public var expenses:ArrayCollection = new ArrayCollection([
        {Expense: "Taxes", Amount: 2000},
        {Expense: "Rent", Amount: 1000},
        {Expense: "Bills", Amount: 100} 
    ]);
    </mx:Script>
    <mx:Panel title="Fill set to pink">
    <mx:BarChart dataProvider="{expenses}" showDataTips="true">
        <mx:verticalAxis>
            <mx:CategoryAxis dataProvider="{expenses}" categoryField="Expense"/>
        </mx:verticalAxis>
        <mx:fill>
            <mx:SolidColor color="0xFF33CC" alpha=". 5"/>
        </mx:fill>
        <mx:series>
            <mx:BarSeries xField="Amount"/>
        </mx:series>
    </mx:BarChart>
    </mx:Panel>
</mx:Application>