Using strokes with chart controls
You use the Stroke class with the chart series and grid lines to control the properties of the lines that Flex uses to draw chart elements.
The following table describes the properties that you use to control the appearance of strokes:
| Property |
Description |
|---|---|
| color | Specifies the color of the line as a hexadecimal value. The default value is 0x000000, which corresponds to black. |
| weight | Specifies the width of the line, in pixels. The default value is 0, which corresponds to a hairline. |
| alpha | Specifies the transparency of a line. Valid values are 0 (invisible) through 100 (opaque). The default value is 100. |
The following example defines a line width of 2 pixels, one with a dark gray border (0x808080) and the other with a light gray border (0xC0C0C0) for the borders of chart items in aBarChart control's BarSeries:
<?xml version="1.0"?>
<!-- charts/BasicBarStroke.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 title="Bar Chart">
<mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries
yField="Month"
xField="Profit"
displayName="Profit"
>
<mx:stroke>
<mx:Stroke
color="0x808080"
weight="2"
alpha=".8"
/>
</mx:stroke>
</mx:BarSeries>
<mx:BarSeries
yField="Month"
xField="Expenses"
displayName="Expenses"
>
<mx:stroke>
<mx:Stroke
color="0xC0C0C0"
weight="2"
alpha=".8"
/>
</mx:stroke>
</mx:BarSeries>
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
Defining AxisRenderer properties with strokes
You can use strokes to define tick marks and other properties of an AxisRenderer, as the following example shows:
<?xml version="1.0"?>
<!-- charts/AxisRendererStrokes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
[Bindable]
public var aapl:Array = [
{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:HLOCChart id="myChart"
dataProvider="{aapl}"
showDataTips="true"
>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
placement="bottom"
canDropLabels="true"
tickPlacement="inside"
tickLength="10"
minorTickPlacement="inside"
minorTickLength="5"
axis="{a1}"
>
<mx:axisStroke>
<mx:Stroke color="#000080" weight="1"/>
</mx:axisStroke>
<mx:tickStroke>
<mx:Stroke color="#000060" weight="1"/>
</mx:tickStroke>
<mx:minorTickStroke>
<mx:Stroke color="#100040" weight="1"/>
</mx:minorTickStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis
id="a1"
minimum="30"
maximum="50"
/>
</mx:verticalAxis>
<mx:series>
<mx:HLOCSeries
dataProvider="{aapl}"
openField="open"
highField="high"
lowField="low"
closeField="close"
displayName="AAPL"
>
</mx:HLOCSeries>
</mx:series>
</mx:HLOCChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Application>
The executing SWF file for the previous example is shown below:
Notice that any time you use an AxisRenderer, you must explicitly set the axis to which it is applied with the renderer's axis property.
You can define a stroke object using an MXML tag, and then bind that stroke object to the chart's renderer properties. For an example, see Applying styles by binding tag definitions.
Using strokes in ActionScript
You can instantiate and manipulate a Stroke object in ActionScript by using the mx.graphics.Stroke class. You can then use the setStyle() method to apply the Stroke object to the chart, as the following example shows:
<?xml version="1.0"?>
<!-- charts/ActionScriptStroke.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.graphics.Stroke;
[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}
]);
public function changeStroke(e:Event):void {
var s:Stroke = new Stroke(0x001100,2);
s.alpha = .5;
s.color = 0x0000FF;
har1.setStyle("axisStroke",s);
var1.setStyle("axisStroke",s);
}
]]></mx:Script>
<mx:Stroke id="baseAxisStroke"
color="0x884422"
weight="10"
alpha=".25"
caps="square"
/>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
id="a1"
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer id="har1" axis="{a1}">
<mx:axisStroke>{baseAxisStroke}</mx:axisStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="var1" axis="{a1}">
<mx:axisStroke>{baseAxisStroke}</mx:axisStroke>
</mx:AxisRenderer>
</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="{myChart}"/>
</mx:Panel>
<mx:Button id="b1"
click="changeStroke(event)"
label="Change Stroke"
/>
</mx:Application>
The executing SWF file for the previous example is shown below:
Defining strokes for LineSeries and AreaSeries
Some chart series have more than one stroke-related style property. For LineSeries, you use the stroke style property to define a style for the chart item's renderer. You use thelineStroke property to define the stroke of the actual line segments.
The following example creates a thick blue line for the LineChart control's line segments, with large red boxes at each data point, which use the CrossItemRenderer object as their renderer:
<?xml version="1.0"?>
<!-- charts/LineSeriesStrokes.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, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:Panel title="Line Chart">
<mx:LineChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries
yField="Profit"
displayName="Profit"
>
<mx:itemRenderer>
<mx:Component>
<mx:CrossItemRenderer
scaleX="1.5"
scaleY="1.5"
/>
</mx:Component>
</mx:itemRenderer>
<mx:fill>
<mx:SolidColor
color="0x0000FF"
/>
</mx:fill>
<mx:stroke>
<mx:Stroke
color="0xFF0066"
alpha="1"
/>
</mx:stroke>
<mx:lineStroke>
<mx:Stroke
color="0x33FFFF"
weight="5"
alpha=".8"
/>
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
Similarly, with the AreaSeries class, you use the stroke property to set a style for the chart item's renderer. You use the areaStroke style property to define the stroke of the line that defines the area.
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_06.html