adobe flex customize tyles of the points in a PlotChart cont

adobe flex customize tyles of the points in a PlotChart cont

Postby haretu » Tue Apr 12, 2011 3:02 pm

To customize the styles of the points in a PlotChart control, you define a SolidColor and a Stroke object for the fill and stroke properties, respectively. The following example defines three SolidColor objects and three custom Stroke objects, and applies them to the PlotSeries objects in the PlotChart control.

Code: Select all
<?xml version="1.0"?>
<!-- charts/PlotFills.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:"January", Profit:2000, Expenses:1500, Amount:450},
        {Month:"February", Profit:1000, Expenses:200, Amount:600},
        {Month:"March", Profit:1500, Expenses:500, Amount:300},
        {Month:"April", Profit:500, Expenses:300, Amount:500},
        {Month:"May", Profit:1000, Expenses:450, Amount:250},
        {Month:"June", Profit:2000, Expenses:500, Amount:700}
     ]);
  ]]></mx:Script>

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

    <!-- Define custom Strokes. -->
    <mx:Stroke id="s1" color="blue" weight="1"/>
    <mx:Stroke id="s2" color="red" weight="1"/>
    <mx:Stroke id="s3" color="green" weight="1"/>

    <mx:Panel title="Plot Chart with custom fills">
        <mx:PlotChart id="myChart"
            dataProvider="{expenses}"
            showDataTips="true"
        >
            <mx:series>
                <mx:PlotSeries
                    xField="Expenses"
                    yField="Profit"
                    displayName="Plot 1"
                    fill="{sc1}"
                    stroke="{s1}"
                />
                <mx:PlotSeries
                    xField="Amount"
                    yField="Expenses"
                    displayName="Plot 2"
                    fill="{sc2}"
                    stroke="{s2}"
                />
                <mx:PlotSeries
                    xField="Profit"
                    yField="Amount"
                    displayName="Plot 3"
                    fill="{sc3}"
                    stroke="{s3}"
                />
            </mx:series>
        </mx:PlotChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>
Attachments
Screen shot 2011-04-12 at 3.01.51 PM.jpg
Screen shot 2011-04-12 at 3.01.51 PM.jpg (48.92 KiB) Viewed 1113 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