Adobe flex customize the styles of the columns

Adobe flex customize the styles of the columns

Postby haretu » Sat Mar 26, 2011 10:22 am

Adobe flex customize the styles of the columns in a ColumnChart control, you specify a SolidColor and a Stroke object for the fill and stroke properties, respectively. The following example defines a custom SolidColor object and a custom Stroke object, and applies them to the ColumnSeries object in the ColumnChart control.
Code: Select all
<?xml version="1.0"?>
<!-- charts/BasicColumnFills.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>

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

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="blue" weight="2"/>
    <mx:Stroke id="s2" color="red" weight="2"/>

    <mx:Panel title="ColumnChart Control with Custom Column Styles">
        <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
            <mx:horizontalAxis>
                <mx:CategoryAxis
                    dataProvider="{expenses}"
                    categoryField="Month"
                />
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries
                    xField="Month"
                    yField="Profit"
                    displayName="Profit"
                    fill="{sc1}"
                    stroke="{s1}"
                />
                <mx:ColumnSeries
                    xField="Month"
                    yField="Expenses"
                    displayName="Expenses"
                    fill="{sc2}"
                    stroke="{s2}"
                />
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>
Attachments
Screen shot 2011-03-26 at 10.21.28 AM.png
Screen shot 2011-03-26 at 10.21.28 AM.png (25.31 KiB) Viewed 694 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron