| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <!DOCTYPE html |
| PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html lang="en-us" xml:lang="en-us"> |
| <head> |
| <meta name="DC.Type" content="topic"/> |
| <meta name="DC.Title" content="Formatting charts"/> |
| <meta name="DC.Format" content="XHTML"/> |
| <meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7c6d_verapache"/> |
| <title>Formatting charts</title> |
| </head> |
| <body id="WS2db454920e96a9e51e63e3d11c0bf69084-7c6d_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c6d_verapache"><!-- --></a> |
| |
| <div> |
| <p>You can customize the look and feel of youry Flex charting controls. You can format the appearance |
| of almost all chart elements, from the font properties of an axis |
| label to the width of the stroke in a legend. </p> |
| |
| <p>To set style properties in your chart controls, you can use Cascading |
| Style Sheets (CSS) syntax or set the style properties inline as |
| tag attributes. As with all styles, you can call the <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html#setStyle()" target="_blank">setStyle()</a> method |
| to set any style on your chart elements.</p> |
| |
| <p>For more information on using the <samp class="codeph">setStyle()</samp> method, |
| see <a href="flx_styles_st.html#WS2db454920e96a9e51e63e3d11c0bf69084-7f7e_verapache">Using |
| the setStyle() and getStyle() methods</a>.</p> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fff_verapache"><!-- --></a> |
| <h2 class="topictitle2">Applying chart styles</h2> |
| |
| |
| <div> |
| <p>You can apply style properties to charts by using CSS or |
| inline syntax. You can also apply styles to chart elements by using |
| binding.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ffe_verapache"><!-- --></a> |
| <h3 class="topictitle3">Applying styles with CSS</h3> |
| |
| |
| <div> |
| <p>You can apply styles to charting components with CSS definitions. |
| You can set chart properties such as fonts and tick marks, or series |
| properties, such as the fills of the boxes in a ColumnChart. </p> |
| |
| <p>A limitation of using CSS to style your charts is that the styleable |
| chart properties often use compound values, such as strokes and |
| gradient fills, that cannot be expressed by using CSS. The result |
| is that you cannot express all values of chart styles by using CSS |
| syntax. </p> |
| |
| <p>To determine if an object's properties can be styled by using |
| CSS, check to see if the class or its parent implements the IStyleClient |
| interface. If it does, then you can set the values of the object's |
| style properties with CSS. If it does not, then the class does not |
| participate in the styles subsystem and you therefore cannot set its |
| properties with CSS. In that case, the properties are public properties |
| of the class and not style properties. You can apply properties |
| with CSS by using pre-defined styles for some classes, such as the <samp class="codeph">verticalAxisStyleName</samp> and <samp class="codeph">horizontalAxisStyleName</samp>. |
| For more information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c47_verapache">Using |
| predefined axis style properties</a>.</p> |
| |
| <p> |
| |
| </p> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ffd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ffd_verapache"><!-- --></a> |
| <h4 class="topictitle4">Applying CSS to chart controls</h4> |
| |
| |
| <div> |
| <p>You |
| can use the control name in CSS to define styles for that control. |
| This is referred to as a type selector, because the style you define |
| is applied to all controls of that type. For example, the following |
| style definition specifies the font for all <a href="https://flex.apache.org/asdoc/mx/charts/BubbleChart.html" target="_blank">BubbleChart</a> controls: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BubbleStyles.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| mx|BubbleChart { |
| fontFamily:Arial; |
| fontSize:15; |
| color:#FF0033; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Bubble Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BubbleChart id="myChart" |
| minRadius="1" |
| maxRadius="50" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| <mx:BubbleSeries |
| xField="profit" |
| yField="expenses" |
| radiusField="amount" |
| displayName="Profit"/> |
| </mx:series> |
| </mx:BubbleChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Some styles, such as <samp class="codeph">fontSize</samp> and <samp class="codeph">fontFamily</samp>, |
| are inheritable, which means that if you set them on the chart control, |
| the axes labels, titles, and other text elements on the chart inherit |
| those settings. To determine whether a style is inheritable, see |
| that style's description in <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>. </p> |
| |
| <p>Axis labels appear next to the tick marks along the chart's axis. |
| Titles appear parallel to the axis line. By default, the text on |
| an axis uses the text styles of the chart control. </p> |
| |
| <p>Axis elements use whatever styles are set on the chart control's |
| type or class selector, but you can also specify different styles |
| for each axis by using a class selector on the axis renderer or |
| predefined axis style properties.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ffc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ffc_verapache"><!-- --></a> |
| <h4 class="topictitle4">Applying different styles to each |
| series</h4> |
| |
| |
| <div> |
| <p>To apply different styles to each series in the charts |
| with CSS, you use the <samp class="codeph">chartSeriesStyles</samp> property. |
| This property takes an Array of Strings. Each String specifies the |
| name of a class selector in the style sheet. Flex applies each of |
| these class selectors to a series.</p> |
| |
| <p>To apply CSS to a series, you define a type or class selector |
| for the chart that defines the <samp class="codeph">chartSeriesStyles</samp> property. |
| You then define each class selector named in the <samp class="codeph">chartSeriesStyles</samp> property.</p> |
| |
| <p>Essentially, you are defining a new style for each series in |
| your chart. For example, if you have a ColumnChart control with |
| two series, you can apply a different style to each series without |
| having to explicitly set the styles on each series. </p> |
| |
| <p>The following example defines the colors for two series in the |
| ColumnChart control:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/SeriesStyles.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| mx|ColumnChart { |
| chartSeriesStyles: PCCSeries1, PCCSeries2; |
| } |
| .PCCSeries1 { |
| fill: #CCFF66; |
| } |
| .PCCSeries2 { |
| fill: #CCFF99; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Setting Styles on Series"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="column" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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="{column}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Flex sets the <samp class="codeph">styleName</samp> property of each series |
| to the corresponding selector in the <samp class="codeph">chartSeriesStyles</samp> Array. |
| You do not have to explicitly set styles for each series. If you |
| have more series than available <samp class="codeph">chartSeriesStyles</samp> selectors, |
| the chart begins again with the first style.</p> |
| |
| <p>If you manually set the value of the <samp class="codeph">styleName</samp> property |
| on a particular series, that style takes priority over the styles |
| that the <samp class="codeph">chartSeriesStyles</samp> property specifies.</p> |
| |
| <p>For PieChart controls, you can define the <samp class="codeph">fills</samp> property |
| of the series. The PieChart applies the values in this Array to |
| the pie wedges. It starts with the first value if there are more |
| wedges than values defined in the Array. The following example creates |
| a PieChart that uses a spectrum of reds for the wedges: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/PieWedgeFills.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/budget-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/budget.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| mx|PieSeries { |
| fills:#FF0000, #FF3333, #FF6666, #FF9999, #FFAAAA, #FFCCCC; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Setting Pie Wedge Fills with CSS"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PieChart id="pie" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| <mx:PieSeries |
| field="amount" |
| nameField="item" |
| labelPosition="callout"/> |
| </mx:series> |
| </mx:PieChart> |
| <mx:Legend dataProvider="{pie}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c47_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c47_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using predefined axis style properties</h4> |
| |
| |
| <div> |
| <p>The following predefined class selectors are available |
| for axis styles:</p> |
| |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">horizontalAxisStyleName</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">verticalAxisStyleName</samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>Flex applies each style to the corresponding axis.</p> |
| |
| <p>In addition to these, the following two class selectors define |
| an array of class selectors that define the style properties for |
| the axes:</p> |
| |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">horizontalAxisStyleNames</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">verticalAxisStyleNames</samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>In this case, Flex loops through the selectors and applies them |
| to the axis renderers that correspond to their position in the Array. </p> |
| |
| <p>In addition to these class selectors for the axis style properties, |
| you can use the <samp class="codeph">axisTitleStyleName</samp> and <samp class="codeph">gridLinesStyleName</samp> class |
| selectors to apply styles to axis titles and grid lines.</p> |
| |
| <p>The following example removes tick marks from the horizontal |
| axis:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/PredefinedAxisStyles.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| mx|ColumnChart { |
| horizontalAxisStyleName:myAxisStyles; |
| verticalAxisStyleName:myAxisStyles; |
| } |
| |
| .myAxisStyles { |
| tickPlacement:none; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Using Predefined Axis Styles"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="column" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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="{column}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ffa_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ffa_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using class selectors for axis |
| styles</h4> |
| |
| |
| <div> |
| <p>To |
| use a class selector to define styles for axis elements, define |
| the custom class selector in an <samp class="codeph"><fx:Style></samp> block |
| or external style sheet, and then use the <samp class="codeph">styleName</samp> property |
| of the <a href="https://flex.apache.org/asdoc/mx/charts/AxisRenderer.html" target="_blank">AxisRenderer</a> class |
| to point to that class selector. Note that any time you want to |
| use an AxisRenderer, you must explicitly set the axis to which it |
| is applied with the renderer's <samp class="codeph">axis</samp> property.</p> |
| |
| <p>The following example defines the <samp class="codeph">MyStyle</samp> style |
| and applies that style to the elements on the horizontal axis: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/AxisClassSelectors.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| .myStyle { |
| fontSize:9; |
| color:red; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="AxisRenderer Class Selectors example"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="column" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer |
| axis="{a1}" |
| styleName="myStyle"/> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="a1" categoryField="month"/> |
| </mx:horizontalAxis> |
| |
| <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="{column}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Most charting-specific style properties are not inheritable, |
| which means that if you set the property on a parent object, the |
| child object does not inherit its value. </p> |
| |
| <p>For more information on using CSS, see <a href="flx_styles_st.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c32_verapache">About |
| styles</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ff9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ff9_verapache"><!-- --></a> |
| <h3 class="topictitle3">Applying styles inline</h3> |
| |
| |
| <div> |
| <p>You can set many styleable elements of a |
| chart as attributes of the MXML tag. For example, to set the styleable |
| properties of an axis, you can use the <samp class="codeph"><mx:AxisRenderer></samp> tag |
| rather than define a new style in CSS. </p> |
| |
| <p>The following example sets the <samp class="codeph">fontSize</samp> property |
| of the horizontal axis to 7:</p> |
| |
| <pre class="codeblock"> <mx:horizontalAxisRenderers> |
|   <mx:AxisRenderer fontSize="7" axis="{h1}"/> |
|  </mx:horizontalAxisRenderers></pre> |
| |
| <p>Notice that any time you want to use an AxisRenderer, you must |
| explicitly set the axis to which it is applied with the renderer's <samp class="codeph">axis</samp> property.</p> |
| |
| <p>You can also access the properties of renderers in ActionScript |
| so that you can change their appearance at run time. For additional |
| information about axis renderers, see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6e_verapache">Working |
| with axes</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c40_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c40_verapache"><!-- --></a> |
| <h3 class="topictitle3">Applying styles by binding tag |
| definitions</h3> |
| |
| |
| <div> |
| <p>You can define styles with MXML tags. You can then bind |
| the values of the renderer properties to those tags. The following |
| example defines the weight and color of the strokes, and then applies |
| those strokes to the chart's <a href="https://flex.apache.org/asdoc/mx/charts/AxisRenderer.html" target="_blank">AxisRenderer</a> class:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BindStyleValues.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx --> |
| <mx:SolidColorStroke color="0x00FF00" weight="2" id="axis"/> |
| <mx:SolidColorStroke color="0xFF0000" weight="1" id="ticks"/> |
| <mx:SolidColorStroke color="0x0000FF" weight="1" id="mticks"/> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="HLOC Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:HLOCChart id="mychart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer |
| axis="{a1}" |
| axisStroke="{axis}" |
| placement="bottom" |
| minorTickPlacement="inside" |
| minorTickLength="2" |
| tickLength="5" |
| tickPlacement="inside"> |
| <mx:tickStroke>{ticks}</mx:tickStroke> |
| <mx:minorTickStroke>{mticks}</mx:minorTickStroke> |
| </mx:AxisRenderer> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:verticalAxis> |
| <mx:LinearAxis id="a1" |
| minimum="30" |
| maximum="50"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:HLOCSeries |
| openField="open" |
| highField="high" |
| lowField="low" |
| closeField="close" |
| displayName="FRED"> |
| </mx:HLOCSeries> |
| </mx:series> |
| </mx:HLOCChart> |
| <mx:Legend dataProvider="{mychart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c3b_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c3b_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using ChartElement objects</h3> |
| |
| |
| <div> |
| <p>The <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/ChartElement.html" target="_blank">ChartElement</a> class |
| is the base class for anything that appears in the data area of |
| the chart. All series objects (such as <a href="https://flex.apache.org/asdoc/mx/charts/GridLines.html" target="_blank">GridLines</a> objects) |
| are ChartElement objects. You can add ChartElement objects (such |
| as images, grid lines, and strokes) to your charts by using the <samp class="codeph">backgroundElements</samp> and <samp class="codeph">annotationElements</samp> properties |
| of the chart classes.</p> |
| |
| <p>The <samp class="codeph">backgroundElements</samp> property specifies an |
| Array of ChartElement objects that appear beneath any data series |
| rendered by the chart. The <samp class="codeph">annotationElements</samp> property |
| specifies an Array of ChartElement objects that appears above any |
| data series rendered by the chart.</p> |
| |
| <p>The ChartElement objects that you can add to a chart include |
| supported image files, such as GIF, PNG, and JPEG. </p> |
| |
| <p>The following example adds new grid lines as annotation elements |
| to the chart and an image as the background element. When the user |
| clicks the button, the annotation elements change:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/AnnotationElements.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script><![CDATA[ |
| import mx.graphics.SolidColor; |
| import mx.charts.GridLines; |
| |
| [Embed(source="../assets/butterfly.gif")] |
| public var butterfly:Class; |
| |
| public function updateGridLines():void { |
| var bgi:GridLines = new GridLines(); |
| |
| var s:SolidColorStroke = new SolidColorStroke(0xff00ff, 3); |
| bgi.setStyle("horizontalStroke",s); |
| |
| var c:SolidColor = new SolidColor(0x990033, .2); |
| bgi.setStyle("horizontalFill",c); |
| |
| var c2:SolidColor = new SolidColor(0x999933, .2); |
| bgi.setStyle("horizontalAlternateFill",c2); |
| |
| myChart.annotationElements = [bgi] |
| |
| var b:Object = new butterfly(); |
| b.alpha = .2; |
| b.height = 150; |
| b.width = 150; |
| |
| myChart.backgroundElements = [ b ]; |
| } |
| ]]></fx:Script> |
| <s:Panel title="Annotation Elements Example"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="month" |
| yField="profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="month" |
| yField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| |
| <mx:annotationElements> |
| <mx:GridLines> |
| <mx:horizontalStroke> |
| <mx:SolidColorStroke |
| color="#191970" |
| weight="2" |
| alpha=".3"/> |
| </mx:horizontalStroke> |
| </mx:GridLines> |
| </mx:annotationElements> |
| |
| <mx:backgroundElements> |
| <s:Image |
| source="@Embed('../assets/butterfly.gif')" |
| alpha=".2"/> |
| </mx:backgroundElements> |
| |
| </mx:ColumnChart> |
| <!-- |
| <mx:Legend dataProvider="{myChart}"/> |
| --> |
| </s:Panel> |
| <s:Button id="b1" |
| click="updateGridLines()" |
| label="Update Grid Lines"/> |
| </s:Application></pre> |
| |
| <p>In ActionScript, you can add an image to the chart and manipulate |
| its properties, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BackgroundElementsWithActionScript.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send();addButterfly()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| import mx.graphics.SolidColor; |
| import mx.charts.GridLines; |
| import mx.charts.ColumnChart; |
| |
| [Embed(source="../assets/butterfly.gif")] |
| public var butterfly:Class; |
| |
| public function addButterfly():void { |
| var b:Object = new butterfly(); |
| b.alpha = .2; |
| myChart.backgroundElements = [ b ]; |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Background Elements with ActionScript"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>For more information on working with grid lines, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c45_verapache">Using |
| chart grid lines</a>.</p> |
| |
| <p>You can also add data graphics to your charts by adding the CartesianDataCanvas |
| and PolarDataCanvas controls to your background or annotation elements |
| Arrays. For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c44_verapache">Drawing |
| on chart controls</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ff6_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ff6_verapache"><!-- --></a> |
| <h2 class="topictitle2">Setting padding properties</h2> |
| |
| |
| <div> |
| <p>The |
| padding properties of a chart define an area between the outside |
| bounds of the chart control and its content. Flex draws only the |
| background fill in the padding area. </p> |
| |
| <p>You can set the padding values for a chart control by using the <samp class="codeph">paddingLeft</samp> and <samp class="codeph">paddingRight</samp> properties |
| that the chart control inherits from the <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html" target="_blank">UIComponent</a> class. |
| You can also use the <samp class="codeph">paddingTop</samp> and <samp class="codeph">paddingBottom</samp> properties |
| that the chart control inherits from the <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/ChartBase.html" target="_blank">ChartBase</a> class.</p> |
| |
| <p>Flex charting control elements also have gutters. The <em>gutter</em> is |
| the area between the padding area and the actual axis line. Flex |
| draws labels, titles, and tick marks for the axes in the gutter |
| of the chart. Chart controls adjust the gutters to accommodate these |
| enhancements to the axis, but you can specify explicit gutter values.</p> |
| |
| <p>The following example shows the locations of the gutters and |
| the padding area on a chart:</p> |
| |
| <div class="figborder"> |
| <img src="images/chf_chart_gutters_margins.png" alt="Locations of the gutters and padding area on a chart."/> |
| <dl> |
| |
| <dt class="dlterm"> |
| <strong>A.</strong> |
| </dt> |
| |
| <dd>Padding area</dd> |
| |
| |
| |
| <dt class="dlterm"> |
| <strong>B.</strong> |
| </dt> |
| |
| <dd>Gutter</dd> |
| |
| |
| |
| <dt class="dlterm"> |
| <strong>C.</strong> |
| </dt> |
| |
| <dd>Axis</dd> |
| |
| |
| |
| <dt class="dlterm"> |
| <strong>D.</strong> |
| </dt> |
| |
| <dd>Label gap</dd> |
| |
| |
| |
| <dt class="dlterm"> |
| <strong>E.</strong> |
| </dt> |
| |
| <dd>Axis label</dd> |
| |
| |
| </dl> |
| |
| </div> |
| |
| <p>The following style properties define the size of a chart's gutters:</p> |
| |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">gutterLeft</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">gutterRight</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">gutterTop</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">gutterBottom</samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>The default value of the gutter styles is <samp class="codeph">undefined</samp>, |
| which means that the chart determines appropriate values. Overriding |
| the default value and explicitly setting gutter values can improve |
| the speed of rendering charts, because Flex does not have to dynamically |
| calculate the gutter size. However, it can also cause clipping of |
| axis labels or other undesirable effects.</p> |
| |
| <p>You set gutter styles on the chart control. The following example |
| creates a region that is 50 pixels wide for the axis labels, titles, |
| and tick marks, by explicitly setting the values of the <samp class="codeph">gutterLeft</samp>, <samp class="codeph">gutterRight</samp>, |
| and <samp class="codeph">gutterBottom</samp> style properties. It also sets |
| the <samp class="codeph">paddingTop</samp> property to 20.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GutterStyles.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| mx|ColumnChart { |
| gutterLeft:50; |
| gutterRight:50; |
| gutterBottom:50; |
| gutterTop:20; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Setting Gutter Properties as Styles"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="column" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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="{column}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Alternatively, you can set the gutter properties inline, as the |
| following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GutterProperties.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Setting Gutter Properties"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="column" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true" |
| gutterLeft="50" |
| gutterRight="50" |
| gutterBottom="50" |
| gutterTop="20"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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="{column}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>In addition to the gutter and padding properties, you can set |
| the <samp class="codeph">labelGap</samp> property of a chart's axes. The <samp class="codeph">labelGap</samp> property |
| defines the distance, in pixels, between the tick marks and the |
| axis labels. You set the <samp class="codeph">labelGap</samp> property on the <a href="https://flex.apache.org/asdoc/mx/charts/AxisRenderer.html" target="_blank">AxisRenderer</a> tag, |
| as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/LabelGaps.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Setting Label Gap Properties"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| gutterLeft="50" |
| gutterRight="50" |
| gutterBottom="50" |
| gutterTop="20" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="a1" categoryField="month"/> |
| </mx:horizontalAxis> |
| |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer axis="{a1}" labelGap="20"/> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer axis="{a1}" labelGap="20"/> |
| </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}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can specify the alignment of axis labels by using the <samp class="codeph">labelAlign</samp> property on |
| the AxisRenderer. For horizontal axis labels, you can specify <samp class="codeph">center</samp>, <samp class="codeph">left</samp>, and <samp class="codeph">right</samp>. |
| For example, in a ColumnChart control, if you set the value of the <samp class="codeph">labelAlign</samp> property |
| to <samp class="codeph">left</samp>, Flex renders the labels at the <samp class="codeph">left</samp> of |
| the bottoms of the columns. For vertical axis labels, you can specify <samp class="codeph">center</samp>, <samp class="codeph">top</samp>, and <samp class="codeph">bottom</samp>. </p> |
| |
| <p>How different the locations of the labels are depends on the |
| available space (for example, the width of the columns) and the |
| font size of the labels.</p> |
| |
| <p>The following example lets you change the label alignment for |
| the vertical and horizontal axes.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ToggleLabelAlignment.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600" width="750"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| |
| [Bindable] |
| private var aligns:ArrayCollection = new ArrayCollection(["center", "left", "right"]); |
| [Bindable] |
| private var aligns2:ArrayCollection = new ArrayCollection(["center", "top", "bottom"]); |
| |
| private function toggleLabelAlignment(s:String):void { |
| if ( s == 'hor' ) { |
| myHAR.setStyle("labelAlign", cb1.selectedItem); |
| } else if ( s == 'ver' ) { |
| myVAR.setStyle("labelAlign", cb2.selectedItem); |
| } |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Toggling Label Alignment"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <s:VGroup> |
| |
| |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| |
| |
| |
| <mx:horizontalAxis> |
| |
| |
| |
| <mx:CategoryAxis id="haxis" categoryField="month"/> |
| |
| |
| |
| </mx:horizontalAxis> |
| |
| |
| |
| |
| <mx:verticalAxis> |
| |
| |
| |
| |
| <mx:LinearAxis id="vaxis"/> |
| |
| |
| |
| </mx:verticalAxis> |
| |
| |
| |
| |
| <mx:horizontalAxisRenderers> |
| |
| |
| |
| |
| <mx:AxisRenderer id="myHAR" axis="{haxis}"/> |
| |
| |
| |
| </mx:horizontalAxisRenderers> |
| |
| |
| |
| |
| <mx:verticalAxisRenderers> |
| |
| |
| |
| |
| <mx:AxisRenderer id="myVAR" axis="{vaxis}"/> |
| |
| |
| |
| </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}"/> |
| |
| </s:VGroup> |
| <s:Form> |
| <s:FormItem label="Horizontal Labels"> |
| <s:ComboBox id="cb1" dataProvider="{aligns}" |
| change="toggleLabelAlignment('hor')"/> |
| </s:FormItem> |
| <s:FormItem label="Vertical Labels"> |
| <s:ComboBox id="cb2" dataProvider="{aligns2}" |
| change="toggleLabelAlignment('ver')"/> |
| </s:FormItem> |
| </s:Form> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c19_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c19_verapache"><!-- --></a> |
| <h2 class="topictitle2">Formatting tick marks</h2> |
| |
| |
| <div> |
| <p>There are two types of tick marks on a Flex chart: major |
| and minor. Major tick marks are the indications along an axis that |
| correspond to an axis label. The text for the axis labels is often |
| derived from the chart's data provider. Minor tick marks are those |
| tick marks that appear between the major tick marks. Minor tick |
| marks help the user to visualize the distance between the major |
| tick marks.</p> |
| |
| <p>You |
| use the <samp class="codeph">tickPlacement</samp> and <samp class="codeph">minorTickPlacement</samp> properties |
| of the <a href="https://flex.apache.org/asdoc/mx/charts/AxisRenderer.html" target="_blank">AxisRenderer</a> object |
| to determine whether or not Flex displays tick marks and where Flex |
| displays tick marks.</p> |
| |
| <p>The following table describes valid values of the <samp class="codeph">tickPlacement</samp> and <samp class="codeph">minorTickPlacement</samp> properties:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e840"> |
| <p>Value</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e846"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e840 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">cross</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e846 "> |
| <p>Places tick marks across the axis.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e840 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">inside</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e846 "> |
| <p>Places tick marks on the inside of the axis |
| line.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e840 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">none</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e846 "> |
| <p>Hides tick marks. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e840 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">outside</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e846 "> |
| <p>Places tick marks on the outside of the |
| axis line. </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p>Flex also lets you set the length of tick marks and the number |
| of minor tick marks that appear along the axis. The following table |
| describes the properties that define the length of tick marks on |
| the chart's axes:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e951"> |
| <p>Property</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e957"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e951 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">tickLength</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e957 "> |
| <p>The length, in pixels, of the major tick |
| mark from the axis.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e951 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">minorTickLength</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e957 "> |
| <p>The length, in pixels, of the minor tick |
| mark from the axis.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p>The minor tick marks overlap the placement of major tick marks. |
| So, if you hide major tick marks but still show minor tick marks, |
| the minor tick marks appear at the regular tick-mark intervals.</p> |
| |
| <p>The following example sets tick marks to the inside of the axis |
| line, sets the tick mark's length to 12 pixels, and hides minor |
| tick marks:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/TickStyles.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600" width="700"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| .myAxisStyle { |
| placement:bottom; |
| minorTickPlacement:none; |
| tickLength:12; |
| tickPlacement:inside; |
| tickStroke: myStroke; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Tick Styles"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <mx:HLOCChart id="mychart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer axis="{a2}" styleName="myAxisStyle"> |
| <mx:tickStroke> |
| <mx:SolidColorStroke color="#999966" weight="1"/> |
| </mx:tickStroke> |
| </mx:AxisRenderer> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:verticalAxis> |
| <mx:LinearAxis id="a1" minimum="30" maximum="50"/> |
| </mx:verticalAxis> |
| |
| <mx:horizontalAxis> |
| <mx:LinearAxis id="a2"/> |
| </mx:horizontalAxis> |
| |
| <mx:series> |
| <mx:HLOCSeries openField="open" highField="high" |
| lowField="low" closeField="close" |
| displayName="Ticker Symbol: FRED"/> |
| </mx:series> |
| </mx:HLOCChart> |
| <mx:Legend dataProvider="{mychart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ff4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ff4_verapache"><!-- --></a> |
| <h2 class="topictitle2">Formatting axis lines</h2> |
| |
| |
| <div> |
| <p>Axes have lines to which the tick marks |
| are attached. You can use style properties to hide these lines or |
| change the width of the lines.</p> |
| |
| <p>To hide the |
| axis line, set the value of the <samp class="codeph">showLine</samp> property |
| on the AxisRenderer object to <samp class="codeph">false</samp>. The default |
| value is <samp class="codeph">true</samp>. The following example sets <samp class="codeph">showLine</samp> to <samp class="codeph">false</samp>:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/DisableAxisLines.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="a1" categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:verticalAxis> |
| <mx:LinearAxis id="a2"/> |
| </mx:verticalAxis> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer |
| axis="{a1}" |
| showLine="false"/> |
| </mx:horizontalAxisRenderers> |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer axis="{a2}" showLine="false"/> |
| </mx:verticalAxisRenderers> |
| <mx:series> |
| <mx:LineSeries yField="profit" displayName="Profit"/> |
| <mx:LineSeries yField="expenses" displayName="Expenses"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can also apply the <samp class="codeph">showLine</samp> property as |
| a CSS style property.</p> |
| |
| <p>You can change the <samp class="codeph">width</samp>, <samp class="codeph">color</samp>, |
| and <samp class="codeph">alpha</samp> of the axis line with the <samp class="codeph"><mx:axisStroke></samp> tag. |
| You use an <samp class="codeph"><mx:SolidColorStroke></samp> child tag |
| to define these properties or define a stroke and then bind it to |
| the <samp class="codeph">axisStroke</samp> object, as the following example |
| shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/StyleAxisLines.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| <mx:SolidColorStroke id="axisStroke" color="#884422" |
| weight="8" alpha=".75" caps="square"/> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="a1" categoryField="month"/> |
| </mx:horizontalAxis> |
| |
| <mx:verticalAxis> |
| <mx:LinearAxis id="a2"/> |
| </mx:verticalAxis> |
| |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer axis="{a1}"> |
| <mx:axisStroke>{axisStroke}</mx:axisStroke> |
| </mx:AxisRenderer> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer axis="{a2}"> |
| <mx:axisStroke> |
| <mx:SolidColorStroke color="#884422" |
| weight="8" alpha=".75" caps="square"/> |
| </mx:axisStroke> |
| </mx:AxisRenderer> |
| </mx:verticalAxisRenderers> |
| |
| <mx:series> |
| <mx:LineSeries yField="profit" displayName="Profit"/> |
| <mx:LineSeries yField="expenses" displayName="Expenses"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>For more information about strokes, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c65_verapache">Using |
| strokes with chart controls</a>.</p> |
| |
| <p>You can change the placement of the axis lines (for example, |
| move the axis line from the bottom of the chart control to the top) |
| by using the <samp class="codeph">placement</samp> property of the AxisRenderer. |
| For more information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c42_verapache">Positioning |
| chart axes</a>.</p> |
| |
| <p>You can also apply filters to axis lines to further customize |
| their appearance. For more information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e69_verapache">Using |
| filters with chart controls</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c65_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c65_verapache"><!-- --></a> |
| <h2 class="topictitle2">Using strokes with chart controls</h2> |
| |
| |
| <div> |
| <p>You use the <a href="https://flex.apache.org/asdoc/mx/graphics/SolidColorStroke.html" target="_blank">SolidColorStroke</a> class |
| with the chart series and grid lines to control the properties of |
| the lines that Flex uses to draw chart elements. </p> |
| |
| <p>You can define strokes in MXML inside the <samp class="codeph"><fx:Declarations></samp> block |
| so that you can reuse the stroke. You can also define an individual |
| stroke inside an MXML tag.</p> |
| |
| <p>The following table describes the properties that you use to |
| control the appearance of strokes:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e1164"> |
| <p>Property</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e1170"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1164 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">color</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1170 "> |
| <p>Specifies the color of the line as a hexadecimal |
| value. The default value is <samp class="codeph">0x000000</samp>, which corresponds |
| to black. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1164 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">weight</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1170 "> |
| <p>Specifies the width of the line, in pixels. |
| The default value is 0, which corresponds to a hairline. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1164 "> |
| <div class="p"> |
| <pre class="codeblock"><samp class="codeph">alpha</samp></pre> |
| |
| </div> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1170 "> |
| <p>Specifies the transparency of a line. Valid |
| values are 0 (invisible) through 100 (opaque). The default value |
| is 100.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p>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 a <a href="https://flex.apache.org/asdoc/mx/charts/BarChart.html" target="_blank">BarChart</a> control's <a href="https://flex.apache.org/asdoc/mx/charts/series/BarSeries.html" target="_blank">BarSeries</a>:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BasicBarStroke.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Bar Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:BarSeries |
| yField="month" |
| xField="profit" |
| displayName="Profit"> |
| <mx:stroke> |
| <mx:SolidColorStroke |
| color="0x808080" |
| weight="2" alpha=".8"/> |
| </mx:stroke> |
| </mx:BarSeries> |
| <mx:BarSeries |
| yField="month" |
| xField="expenses" |
| displayName="Expenses"> |
| <mx:stroke> |
| <mx:SolidColorStroke |
| color="0xC0C0C0" |
| weight="2" alpha=".8"/> |
| </mx:stroke> |
| </mx:BarSeries> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ff2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ff2_verapache"><!-- --></a> |
| <h3 class="topictitle3">Defining AxisRenderer properties |
| with strokes</h3> |
| |
| |
| <div> |
| <p>You can use strokes to define tick marks and other properties |
| of an <a href="https://flex.apache.org/asdoc/mx/charts/AxisRenderer.html" target="_blank">AxisRenderer</a>, as |
| the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/AxisRendererStrokes.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="HighLowOpenClose Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:HLOCChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer |
| placement="bottom" |
| canDropLabels="true" |
| tickPlacement="inside" |
| tickLength="10" |
| minorTickPlacement="inside" |
| minorTickLength="5" |
| axis="{a1}"> |
| <mx:axisStroke> |
| <mx:SolidColorStroke color="#000080" weight="1"/> |
| </mx:axisStroke> |
| |
| <mx:tickStroke> |
| <mx:SolidColorStroke color="#000060" weight="1"/> |
| </mx:tickStroke> |
| |
| <mx:minorTickStroke> |
| <mx:SolidColorStroke 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 |
| openField="open" |
| highField="high" |
| lowField="low" |
| closeField="close" |
| displayName="FRED"> |
| </mx:HLOCSeries> |
| </mx:series> |
| </mx:HLOCChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Notice that any time you use an AxisRenderer, you must explicitly |
| set the axis to which it is applied with the renderer's <samp class="codeph">axis</samp> property.</p> |
| |
| <p>You can define a SolidColorStroke object using an MXML tag, and |
| then bind that SolidColorStroke to the chart's renderer properties. |
| For an example, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c40_verapache">Applying styles |
| by binding tag definitions</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ff1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ff1_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using strokes in ActionScript</h3> |
| |
| |
| <div> |
| <p>You can instantiate and manipulate a <a href="https://flex.apache.org/asdoc/mx/graphics/SolidColorStroke.html" target="_blank">SolidColorStroke</a> object |
| in ActionScript by using the mx.graphics.SolidColorStroke class. |
| You can then use the <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html#setStyle()" target="_blank">setStyle()</a> method |
| to apply the SolidColorStroke object to the chart, as the following example |
| shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ActionScriptStroke.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns="*" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script><![CDATA[ |
| import mx.graphics.SolidColorStroke; |
| |
| public function changeStroke(e:Event):void { |
| var s:SolidColorStroke = new SolidColorStroke(0x001100,2); |
| s.alpha = .5; |
| s.color = 0x0000FF; |
| har1.setStyle("axisStroke",s); |
| var1.setStyle("axisStroke",s); |
| } |
| ]]></fx:Script> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| <mx:SolidColorStroke id="baseAxisStroke" |
| color="0x884422" |
| weight="10" |
| alpha=".25" |
| caps="square"/> |
| </fx:Declarations> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="a1" categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:verticalAxis> |
| <mx:LinearAxis id="a2"/> |
| </mx:verticalAxis> |
| |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer id="har1" axis="{a1}"> |
| <mx:axisStroke>{baseAxisStroke}</mx:axisStroke> |
| </mx:AxisRenderer> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer id="var1" axis="{a2}"> |
| <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}"/> |
| </s:Panel> |
| <s:Button id="b1" |
| click="changeStroke(event)" |
| label="Change SolidColorStroke"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7ff0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7ff0_verapache"><!-- --></a> |
| <h3 class="topictitle3">Defining strokes for LineSeries |
| and AreaSeries</h3> |
| |
| |
| <div> |
| <p>Some chart series have more than one stroke-related style |
| property. For <a href="https://flex.apache.org/asdoc/mx/charts/series/LineSeries.html" target="_blank">LineSeries</a>, |
| you use the <samp class="codeph">stroke</samp> style property to define a style |
| for the chart item's renderer. You use the <samp class="codeph">lineStroke</samp> property |
| to define the stroke of the actual line segments. </p> |
| |
| <p>The following example creates a thick blue line for the <a href="https://flex.apache.org/asdoc/mx/charts/LineChart.html" target="_blank">LineChart</a> control's |
| line segments, with large red boxes at each data point, which use |
| the <a href="https://flex.apache.org/asdoc/mx/charts/renderers/CrossItemRenderer.html" target="_blank">CrossItemRenderer</a> object |
| as their renderer: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/LineSeriesStrokes.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:LineSeries |
| yField="profit" |
| displayName="Profit"> |
| <mx:itemRenderer> |
| <fx:Component> |
| <mx:CrossItemRenderer scaleX="1.5" scaleY="1.5"/> |
| </fx:Component> |
| </mx:itemRenderer> |
| <mx:fill> |
| <mx:SolidColor color="0x0000FF"/> |
| </mx:fill> |
| <mx:stroke> |
| <mx:SolidColorStroke color="0xFF0066" alpha="1"/> |
| </mx:stroke> |
| <mx:lineStroke> |
| <mx:SolidColorStroke color="0x33FFFF" weight="5" alpha=".8"/> |
| </mx:lineStroke> |
| </mx:LineSeries> |
| <mx:LineSeries yField="expenses" displayName="Expenses"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Similarly, with the <a href="https://flex.apache.org/asdoc/mx/charts/series/AreaSeries.html" target="_blank">AreaSeries</a> class, |
| you use the <samp class="codeph">stroke</samp> property to set a style for the |
| chart item's renderer. You use the <samp class="codeph">areaStroke</samp> style |
| property to define the stroke of the line that defines the area.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c69_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c69_verapache"><!-- --></a> |
| <h2 class="topictitle2">Using fills with chart controls</h2> |
| |
| |
| <div> |
| <p>When |
| charting multiple data series, or just to improve the appearance |
| of your charts, you can control the fill for each series in the |
| chart or each item in a series. The fill lets you specify a pattern |
| that defines how Flex draws the chart element. You also use fills |
| to specify the background colors of the chart or bands of background |
| colors defined by the grid lines. Fills can be solid or can use |
| linear and radial gradients. A <em>gradient</em> specifies a gradual |
| color transition in the fill color.</p> |
| |
| <p>You use fills in the following ways:</p> |
| |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">fill</samp> Set the value of the <samp class="codeph">fill</samp> property |
| on a series to a single fill. This applies that fill to all chart |
| items in that series. For example, all columns in a single series |
| will have the same fill.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">fills</samp> Set the value of the <samp class="codeph">fills</samp> property |
| on a series to an Array of fills. This applies a different fill |
| from the Array to each chart item in the series. For example, each |
| column in a series will have a different fill. The <a href="https://flex.apache.org/asdoc/mx/charts/series/LineSeries.html" target="_blank">LineSeries</a> and <a href="https://flex.apache.org/asdoc/mx/charts/renderers/LineRenderer.html" target="_blank">LineRenderer</a> objects |
| are not affected by the <samp class="codeph">fill</samp> property's settings. </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">fillFunction</samp> Set the value of the <samp class="codeph">fillFunction</samp> property |
| on a series to point to a custom method. This method returns a fill |
| based on the values of the chart item in the series. The return |
| value of this function takes precedence over fills specified as |
| styles. For information on using the <samp class="codeph">fillFunction</samp> property, |
| see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c3f_verapache">Using |
| per-item fills</a>.</p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>All series except the HLOCSeries class support setting the fill-related |
| properties.</p> |
| |
| <p>If you use the <samp class="codeph">fills</samp> property or the <samp class="codeph">fillFunction</samp> to |
| define the fills of chart items, and you want a legend, you must |
| manually create the Legend object for that chart. For more information |
| on creating Legend objects, see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c3e_verapache">Using |
| Legend controls</a>.</p> |
| |
| <p>One of the most common uses of a fill is to control the color |
| of the chart when you have multiple data series in a chart. The |
| following example uses the <samp class="codeph">fill</samp> property to set |
| the color for each ColumnSeries object in a ColumnChart control:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ColumnFills.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="month" |
| yField="profit" |
| displayName="Profit"> |
| <mx:fill> |
| <mx:SolidColor color="0x336699"/> |
| </mx:fill> |
| </mx:ColumnSeries> |
| |
| <mx:ColumnSeries |
| xField="month" |
| yField="expenses" |
| displayName="Expenses"> |
| <mx:fill> |
| <mx:SolidColor color="0xFF99FF"/> |
| </mx:fill> |
| </mx:ColumnSeries> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>If you do not explicitly define different fills for multiple |
| data series, Flex chooses solid colors for you.</p> |
| |
| <p>You can also specify an array of colors using the <samp class="codeph">fills</samp> property |
| of the series. This property takes an Array of objects that define |
| the fills. You can use this property to define a different color |
| for each item in the series. If you do not define as many colors |
| in the Array as there are items in the series, the chart starts |
| with the first item in the Array on the next item.</p> |
| |
| <p>The following example defines two Arrays of SolidColor objects. |
| The first Array defines the colors of the items in the first series |
| in the chart and the second Array defines the colors of the items |
| in the second series. All of the fills in this example are partially |
| transparent (the alpha value in the SolidColor constructor is .5).</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/SimpleFillsExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.graphics.SolidColor; |
| |
| // Make all fills partially transparent by |
| // setting the alpha to .5. |
| [Bindable] |
| private var warmColorsArray:Array = new Array( |
| new SolidColor(0xFF0033, .5), |
| new SolidColor(0xFF0066, .5), |
| new SolidColor(0xFF0099, .5) |
| ); |
| [Bindable] |
| private var coolColorsArray:Array = new Array( |
| new SolidColor(0x3333CC, .5), |
| new SolidColor(0x3366CC, .5), |
| new SolidColor(0x3399CC, .5) |
| ); |
| |
| ]]> |
| </fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="month" |
| yField="profit" |
| displayName="Profit" |
| fills="{warmColorsArray}"> |
| </mx:ColumnSeries> |
| |
| <mx:ColumnSeries |
| xField="month" |
| yField="expenses" |
| displayName="Expenses" |
| fills="{coolColorsArray}"> |
| </mx:ColumnSeries> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>This example does not have a legend. If you use the <samp class="codeph">fills</samp> property |
| or the <samp class="codeph">fillFunction</samp> to define the fills of chart |
| items, and you want a legend, you must manually create the Legend |
| object for that chart. For more information on creating Legend objects, |
| see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c3e_verapache">Using |
| Legend controls</a>.</p> |
| |
| <p>With the PieSeries, |
| you typically use a single Array of fills to specify how Flex should |
| draw the individual wedges. For example, you can give each wedge |
| that represents a PieSeries its own color, as the following example |
| shows: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/PieFills.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/budget-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/budget.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Pie Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PieChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| <mx:PieSeries |
| field="amount" |
| nameField="item" |
| labelPosition="callout"> |
| <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:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>This example also shows how you use the <samp class="codeph"><mx:fills></samp> tag |
| inside a series to define an Array of fills for that series.</p> |
| |
| <p>You can also use fills to set the background of the charts. You |
| do this by adding an <samp class="codeph"><mx:fill></samp> child tag |
| to the chart tag, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BackgroundFills.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Background Fill"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:fill> |
| <mx:SolidColor color="0x66CCFF" alpha=".5"/> |
| </mx:fill> |
| <mx:series> |
| <mx:BarSeries xField="expenses" displayName="Expenses"/> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fee_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fee_verapache"><!-- --></a> |
| <h3 class="topictitle3">Setting fills with CSS</h3> |
| |
| |
| <div> |
| <p>You can use the <samp class="codeph">fill</samp> or <samp class="codeph">fills</samp> style |
| properties in an <samp class="codeph"><fx:Style></samp> declaration by |
| using CSS syntax. You can use a type or a class selector. The following |
| example sets the fill of the custom <samp class="codeph">myBarChartStyle</samp> class |
| selector to <samp class="codeph">#FF0000</samp>:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BackgroundFillsCSS.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| .myBarChartStyle { |
| fill:#FF0000; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Background Fill"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true" |
| styleName="myBarChartStyle"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:BarSeries xField="expenses" displayName="Expenses"/> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Flex converts the fill style in the class selector to a <a href="https://flex.apache.org/asdoc/mx/graphics/SolidColor.html" target="_blank">SolidColor</a> object.</p> |
| |
| <p>The following example defines colors for each of the series by |
| setting the value of the <samp class="codeph">fill</samp> style property in |
| the custom class selectors:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/SimpleCSSFillsExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| .myRedColumnSeries { |
| fill:#FF0033; |
| } |
| .myGreenColumnSeries { |
| fill:#33FF00; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="month" |
| yField="profit" |
| displayName="Profit" |
| styleName="myRedColumnSeries"> |
| </mx:ColumnSeries> |
| |
| <mx:ColumnSeries |
| xField="month" |
| yField="expenses" |
| displayName="Expenses" |
| styleName="myGreenColumnSeries"> |
| </mx:ColumnSeries> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>To specify an Array for the <samp class="codeph">fills</samp> property in |
| CSS, you use a comma-separated list, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/CSSFillsArrayExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| .myRedColumnSeries { |
| fills: #FF0033, #FF3333, #FF6633; |
| } |
| .myGreenColumnSeries { |
| fills: #33FF00, #33FF33, #33FF66; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="month" |
| yField="profit" |
| displayName="Profit" |
| styleName="myRedColumnSeries"> |
| </mx:ColumnSeries> |
| |
| <mx:ColumnSeries |
| xField="month" |
| yField="expenses" |
| displayName="Expenses" |
| styleName="myGreenColumnSeries"> |
| </mx:ColumnSeries> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c15_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c15_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using gradient fills with chart |
| controls</h3> |
| |
| |
| <div> |
| <p>Flex provides several classes that let you |
| specify gradient fills. You use either the <a href="https://flex.apache.org/asdoc/mx/graphics/LinearGradient.html" target="_blank">LinearGradient</a> class |
| or the <a href="https://flex.apache.org/asdoc/mx/graphics/RadialGradient.html" target="_blank">RadialGradient</a> class, |
| along with the <a href="https://flex.apache.org/asdoc/mx/graphics/GradientEntry.html" target="_blank">GradientEntry</a> class |
| to specify a gradient fill. The following table describes these |
| classes:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e1653"> |
| <p>Class</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e1659"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1653 "> |
| <p>LinearGradient</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1659 "> |
| <p>Defines a gradient fill that starts at a |
| boundary of the chart element. You specify an array of GradientEntry |
| objects to control gradient transitions with the LinearGradient |
| object.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1653 "> |
| <p>RadialGradient</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1659 "> |
| <p>Defines a gradient fill that radiates from |
| the center of a chart element. You specify an array of GradientEntry objects |
| to control gradient transitions with the RadialGradient object. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1653 "> |
| <p>GradientEntry</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e1659 "> |
| <p>Defines the objects that control the gradient |
| transition. Each GradientEntry object contains the following properties: </p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">color</samp> Specifies a color value.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">alpha</samp> Specifies the transparency. Valid |
| values are 0 (invisible) through 1 (opaque). The default value is |
| 1.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">ratio</samp> Specifies where in the chart, as a |
| percentage, Flex starts the transition to the next <samp class="codeph">color</samp>. |
| For example, if you set the <samp class="codeph">ratio</samp> property to .33, |
| Flex begins the transition 33% of the way through the chart. If |
| you do not set the <samp class="codeph">ratio</samp> property, Flex tries to |
| evenly apply values based on the <samp class="codeph">ratio</samp> properties |
| for the other GradientEntry objects. Valid values range from 0 to |
| 1.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p>The following example uses a LinearGradient class with gradient |
| fills for the chart's background:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GradientFills.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Gradient Background Fill"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:fill> |
| <mx:LinearGradient> |
| <mx:entries> |
| <mx:GradientEntry |
| color="0xC5C551" |
| ratio="0" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xFEFE24" |
| ratio=".33" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xECEC21" |
| ratio=".66" |
| alpha="1"/> |
| </mx:entries> |
| </mx:LinearGradient> |
| </mx:fill> |
| <mx:series> |
| <mx:BarSeries xField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>The LinearGradient object takes a single attribute, <samp class="codeph">angle</samp>. |
| By default, it defines a transition from left to right across the |
| chart. Use the <samp class="codeph">angle</samp> property to control the direction |
| of the transition. For example, a value of 180 causes the transition to |
| occur from right to left, rather than from left to right. </p> |
| |
| <div class="p">To add gradient fills to a chart in ActionScript, you define |
| GradientEntry objects, assign values to their properties (such as <samp class="codeph">ratio</samp> and <samp class="codeph">color</samp>), |
| and add them as entries to a gradient's entries Array. You then |
| apply the gradient to the chart's fill by using the <samp class="codeph">setStyle()</samp> method. |
| The following example shows how to do this in ActionScript:<pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GradientFillsInActionScript.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.graphics.LinearGradient; |
| import mx.graphics.GradientEntry; |
| import mx.collections.ArrayCollection; |
| |
| private function styleChart():void { |
| var ge1:GradientEntry = new GradientEntry(0xCCFF99, 0); |
| var ge2:GradientEntry = new GradientEntry(0x99FF00, .33); |
| var ge3:GradientEntry = new GradientEntry(0x669900, .66); |
| |
| var lg1:LinearGradient = new LinearGradient(); |
| lg1.entries = [ge1, ge2, ge3]; |
| |
| myChart.setStyle("fill", lg1); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Gradient Entries in ActionScript Fill"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true" |
| creationComplete="styleChart()"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:BarSeries xField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:BarChart> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>You can set other properties on gradients, such as <samp class="codeph">angle</samp>, |
| to change the appearance of chart fills. The following example sets |
| the <samp class="codeph">angle</samp> property to 90, which specifies that |
| the transition occurs from the top of the chart to the bottom.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GradientFillsAngled.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Angled Gradient Background Fill"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:fill> |
| <mx:LinearGradient rotation="90"> |
| <mx:entries> |
| <mx:GradientEntry |
| color="0xC5C551" |
| ratio="0" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xFEFE24" |
| ratio=".33" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xECEC21" |
| ratio=".66" |
| alpha="1"/> |
| </mx:entries> |
| </mx:LinearGradient> |
| </mx:fill> |
| <mx:series> |
| <mx:BarSeries xField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fec_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fec_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using different alpha values with |
| fills</h3> |
| |
| |
| <div> |
| <p>When charting |
| multiple data series, you can define the series to overlap. For example, |
| the column chart lets you display the columns next to each other |
| or overlap them for multiple data series. To overlap series, you |
| set the <samp class="codeph">type</samp> property of the chart to <samp class="codeph">overlaid</samp>. |
| The same is true for an area series. </p> |
| |
| <p>When you have multiple data series that overlap, you can specify |
| that the fill for each series has an alpha value less than 100%, |
| so that the series have a level of transparency. The valid values |
| for the <samp class="codeph">alpha</samp> property are 0 (invisible) through |
| 1 (opaque).</p> |
| |
| <p>You cannot specify alpha values for fills if you apply the fills |
| using CSS.</p> |
| |
| <p>The following example defines an area chart in which each series |
| in the chart uses a solid fill with the same level of transparency: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/AlphaFills.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Area Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:AreaChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:AreaSeries |
| yField="profit" |
| displayName="Profit"> |
| <mx:areaStroke> |
| <mx:SolidColorStroke |
| color="0x9A9A00" |
| weight="2"/> |
| </mx:areaStroke> |
| <mx:areaFill> |
| <mx:SolidColor |
| color="0x7EAEFF" |
| alpha=".3"/> |
| </mx:areaFill> |
| </mx:AreaSeries> |
| <mx:AreaSeries |
| yField="expenses" |
| displayName="Expenses"> |
| <mx:areaStroke> |
| <mx:SolidColorStroke |
| color="0x9A9A00" |
| weight="2"/> |
| </mx:areaStroke> |
| <mx:areaFill> |
| <mx:SolidColor |
| color="0xAA0000" |
| alpha=".3"/> |
| </mx:areaFill> |
| </mx:AreaSeries> |
| </mx:series> |
| </mx:AreaChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>If you define a gradient fill, you can set the <samp class="codeph">alpha</samp> property |
| on each entry in the Array of <samp class="codeph"><mx:GradientEntry></samp> tags, |
| as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GradientAlphaFills.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Area Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:AreaChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:AreaSeries yField="profit" displayName="Profit"> |
| <mx:areaStroke> |
| <mx:SolidColorStroke color="0x9A9A00" weight="2"/> |
| </mx:areaStroke> |
| <mx:areaFill> |
| <mx:LinearGradient rotation="90"> |
| <mx:entries> |
| <mx:GradientEntry |
| color="0xC5C551" |
| ratio="0" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xFEFE24" |
| ratio=".33" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xECEC21" |
| ratio=".66" |
| alpha=".2"/> |
| </mx:entries> |
| </mx:LinearGradient> |
| </mx:areaFill> |
| </mx:AreaSeries> |
| <mx:AreaSeries |
| yField="expenses" |
| displayName="Expenses"> |
| <mx:areaStroke> |
| <mx:SolidColorStroke color="0x9A9A00" weight="2"/> |
| </mx:areaStroke> |
| <mx:areaFill> |
| <mx:LinearGradient rotation="90"> |
| <mx:entries> |
| <mx:GradientEntry |
| color="0xAA0000" |
| ratio="0" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xCC0000" |
| ratio=".33" |
| alpha="1"/> |
| <mx:GradientEntry |
| color="0xFF0000" |
| ratio=".66" |
| alpha=".2"/> |
| </mx:entries> |
| </mx:LinearGradient> |
| </mx:areaFill> |
| </mx:AreaSeries> |
| </mx:series> |
| </mx:AreaChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>In this example, you make the last gradient color in the series |
| partially transparent by setting its <samp class="codeph">alpha</samp> property |
| to .2.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7e69_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7e69_verapache"><!-- --></a> |
| <h2 class="topictitle2">Using filters with chart controls</h2> |
| |
| |
| <div> |
| <p>You can add filters such as drop shadows to your chart |
| elements by using the classes in the spark.filters.* package. These |
| filters include:</p> |
| |
| <ul> |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/BevelFilter.html" target="_blank">BevelFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/BitmapFilter.html" target="_blank">BitmapFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/BlurFilter.html" target="_blank">BlurFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/ColorMatrixFilter.html" target="_blank">ColorMatrixFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/ConvolutionFilter.html" target="_blank">ConvolutionFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/DisplacementMapFilter.html" target="_blank">DisplacementMapFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/DropShadowFilter.html" target="_blank">DropShadowFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/GlowFilter.html" target="_blank">GlowFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/GradientBevelFilter.html" target="_blank">GradientBevelFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/GradientGlowFilter.html" target="_blank">GradientGlowFilter</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/filters/ShaderFilter.html" target="_blank">ShaderFilter</a> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>You can apply filters to the chart control itself, or to each |
| chart series. When you apply a filter to a chart control, the filter |
| is applied to all aspects of that chart control, including gridlines, |
| axis labels, and each data point in the series. The following image |
| shows a drop shadow filter applied to a ColumnChart control:</p> |
| |
| <div class="figborder"> |
| <img src="images/chf_ColumnWithDropShadow.png" alt="A drop shadow filter applied to a ColumnChart control."/> |
| </div> |
| |
| <p>You wrap the filter class in an <samp class="codeph"><mx:filters></samp> or <samp class="codeph"><s:filters></samp> tag |
| to define the array of filters applied to that control. If the control |
| is an MX control, you use the <samp class="codeph"><mx:filters></samp> tag. |
| If the control is a Spark control, you use the <samp class="codeph"><s:filters></samp> tag. |
| In the case of charting components, you use the <samp class="codeph"><mx:filters></samp> tag |
| because the charts are in the MX component set. At compile time, |
| the MX filters are mapped to the Spark filters.</p> |
| |
| <p>The following example applies a custom drop shadow filter to |
| a ColumnChart control. The result is that every element, including |
| the grid lines, axis labels, and columns, has a background shadow.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ColumnWithDropShadow.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="ColumnChart with drop shadow example"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="column" dataProvider="{srv.lastResult.data.result}" showDataTips="true"> |
| <!-- Add a custom drop shadow filter to the ColumnChart control. --> |
| <mx:filters> |
| <s:DropShadowFilter |
| distance="10" |
| color="0x666666" |
| alpha=".8"/> |
| </mx:filters> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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="{column}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>For more information on filters, see <a href="flx_styles_st.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c48_verapache">Using |
| filters</a>.</p> |
| |
| <p>Adding a drop shadow filter to some chart controls can have unexpected |
| consequences. For example, if you add a drop shadow filter to a |
| PieChart control, Flex renders that drop shadow filter in addition |
| to the default drop shadow filter on the PieSeries.</p> |
| |
| <p>You can remove filters by setting the filters Array to an empty |
| Array, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ClearFilters.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| height="600"> |
| |
| <fx: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} |
| ]); |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel id="p1" title="Line chart with no filters"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{expenses}" |
| showDataTips="true"> |
| |
| <!-- Clear the filters array. --> |
| <mx:seriesFilters> |
| <fx:Array/> |
| </mx:seriesFilters> |
| |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| |
| <mx:series> |
| <mx:LineSeries |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:LineSeries |
| yField="Expenses" |
| displayName="Expenses"/> |
| <mx:LineSeries |
| yField="Amount" |
| displayName="Amount"/> |
| </mx:series> |
| </mx:LineChart> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>The following example creates a PieChart control and applies |
| a drop shadow to it; it also removes the default drop shadow filter |
| from the PieSeries so that there is a single drop shadow:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/PieChartShadow.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/budget-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/budget.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Pie Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PieChart id="pie" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <!-- Add a custom drop shadow to the PieChart control --> |
| <mx:filters> |
| <s:DropShadowFilter |
| distance="10" |
| color="0x666666" |
| alpha=".8"/> |
| </mx:filters> |
| <mx:series> |
| <fx:Array> |
| <mx:PieSeries field="amount" nameField="item" |
| labelPosition="callout" explodeRadius=".2"> |
| <!-- Clear default shadow on the PieSeries --> |
| <mx:filters> |
| <fx:Array/> |
| </mx:filters> |
| </mx:PieSeries> |
| </fx:Array> |
| </mx:series> |
| </mx:PieChart> |
| <mx:Legend dataProvider="{pie}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can add filters to individual chart elements that are display |
| objects, such as series, grid lines, legend items, and axes. The |
| following example defines set of filters, and then applies them |
| to various chart elements:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/MultipleFilters.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send();createFilters();" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import spark.filters.*; |
| import flash.filters.BitmapFilterType; |
| import flash.filters.BitmapFilterQuality; |
| |
| private var myBlurFilter:BlurFilter; |
| private var myGlowFilter:GlowFilter; |
| private var myBevelFilter:BevelFilter; |
| private var myDropShadowFilter:DropShadowFilter; |
| |
| private var color:Number = 0xFF33FF; |
| |
| public function applyFilters():void { |
| // Apply filters to series, grid lines, legend, and axis. |
| myGridlines.filters = [myBlurFilter]; |
| myLegend.filters = [myGlowFilter]; |
| myAxisRenderer.filters = [myBevelFilter]; |
| s1.filters = [myDropShadowFilter]; |
| s2.filters = [myDropShadowFilter]; |
| } |
| |
| public function createFilters():void { |
| // Define filters. |
| myBlurFilter = new BlurFilter(4,4,1); |
| |
| myGlowFilter = new GlowFilter(color, .8, 6, 6, |
| 2, 1, false, false); |
| |
| myDropShadowFilter = new DropShadowFilter(15, 45, |
| color, 0.8, 8, 8, 0.65, 1, false, false); |
| |
| myBevelFilter = new BevelFilter(5, 45, color, 0.8, |
| 0x333333, 0.8, 5, 5, 1, BitmapFilterQuality.HIGH, |
| BitmapFilterType.INNER, false); |
| |
| applyFilters(); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Applying Multiple Filters"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:backgroundElements> |
| <mx:GridLines id="myGridlines" |
| horizontalChangeCount="1" |
| verticalChangeCount="1" |
| gridDirection="both"/> |
| </mx:backgroundElements> |
| |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="a1" categoryField="month"/> |
| </mx:horizontalAxis> |
| |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer |
| id="myAxisRenderer" |
| placement="bottom" |
| canDropLabels="true" |
| axis="{a1}"> |
| <mx:axisStroke> |
| <mx:SolidColorStroke color="#000080" weight="10"/> |
| </mx:axisStroke> |
| <mx:tickStroke> |
| <mx:SolidColorStroke color="#000060" weight="5"/> |
| </mx:tickStroke> |
| <mx:minorTickStroke> |
| <mx:SolidColorStroke color="#100040" weight="5"/> |
| </mx:minorTickStroke> |
| </mx:AxisRenderer> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:series> |
| <mx:ColumnSeries id="s1" |
| xField="month" |
| yField="profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries id="s2" |
| xField="month" |
| yField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend id="myLegend" dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c45_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c45_verapache"><!-- --></a> |
| <h2 class="topictitle2">Using chart grid lines</h2> |
| |
| |
| <div> |
| <p>All charts except the <a href="https://flex.apache.org/asdoc/mx/charts/PieChart.html" target="_blank">PieChart</a> control |
| have grid lines by default. You can control those grid lines with |
| the CSS <samp class="codeph">gridLinesStyleName</samp> property, and with the chart |
| series' <samp class="codeph">backgroundElements</samp> and <samp class="codeph">annotationElements</samp> properties. </p> |
| |
| <p>You |
| can include horizontal, vertical, or both grid lines in your chart |
| with the GridLines object. You can set these behind the data series |
| by using the chart's <samp class="codeph">backgroundElements</samp> property |
| or in front of the data series by using the <samp class="codeph">annotationElements</samp> property. </p> |
| |
| <p>The following example turns on grid lines in both directions |
| and applies them to the chart: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GridLinesBoth.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| <fx:Array id="bge"> |
| <mx:GridLines gridDirection="both"/> |
| </fx:Array> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| showDataTips="true" |
| dataProvider="{srv.lastResult.data.result}" |
| backgroundElements="{bge}"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <div class="note"><span class="notetitle">Note:</span> The <samp class="codeph">annotationElements</samp> property |
| refers to any chart elements that appear in the foreground of your |
| chart, and the <samp class="codeph">backgroundElements</samp> property refers |
| to any chart elements that appear behind the chart's data series.</div> |
| |
| <p>You can also define the grid lines inside each chart control's |
| definition, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GridLinesBothInternal.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:backgroundElements> |
| <mx:GridLines gridDirection="both"/> |
| </mx:backgroundElements> |
| |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>To |
| define the fills and strokes for grid lines, you use the <samp class="codeph">horizontalStroke</samp>, <samp class="codeph">verticalStroke</samp>, <samp class="codeph">horizontalFill</samp>, |
| and <samp class="codeph">verticalFill</samp> properties. The following properties |
| also define the appearance of grid lines:</p> |
| |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">horizontalAlternateFill</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">horizontalChangeCount</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">horizontalOriginCount</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">horizontalShowOrigin</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">horiztontalTickAligned</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">verticalAlternateFill</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">verticalChangeCount</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">verticalOriginCount</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">verticalShowOrigin</samp> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">verticalTickAligned</samp> |
| </p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>For information on working with strokes, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c65_verapache">Using |
| strokes with chart controls</a>. For more information on using |
| the <samp class="codeph">backgroundElements</samp> and <samp class="codeph">annotationElements</samp> properties, |
| see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c3b_verapache">Using |
| ChartElement objects</a>.</p> |
| |
| <p>You can manipulate the appearance of the grid |
| lines directly in MXML, with ActionScript, or with CSS. The following |
| sections describe techniques for formatting grid lines for chart |
| objects.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fe9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fe9_verapache"><!-- --></a> |
| <h3 class="topictitle3">Formatting chart grid lines with |
| MXML</h3> |
| |
| |
| <div> |
| <p>To control the appearance of the grid lines, you can specify |
| an array of <a href="https://flex.apache.org/asdoc/mx/charts/GridLines.html" target="_blank">GridLines</a> objects |
| as MXML tags, as the following example shows: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GridLinesFormatMXML.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| <fx:Array id="bge"> |
| <mx:GridLines |
| horizontalChangeCount="1" |
| verticalChangeCount="1" |
| gridDirection="both" |
| > |
| <mx:horizontalStroke> |
| <mx:SolidColorStroke weight="3"/> |
| </mx:horizontalStroke> |
| <mx:verticalStroke> |
| <mx:SolidColorStroke weight="3"/> |
| </mx:verticalStroke> |
| <mx:horizontalFill> |
| <mx:SolidColor color="0x99033" alpha=".66"/> |
| </mx:horizontalFill> |
| </mx:GridLines> |
| </fx:Array> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| showDataTips="true" |
| dataProvider="{srv.lastResult.data.result}" |
| backgroundElements="{bge}"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>This example uses the <samp class="codeph">changeCount</samp> property to |
| specify that Flex draws grid lines at every tick mark along the |
| axis, and sets the <samp class="codeph">gridDirection</samp> property to <samp class="codeph">both</samp>. |
| This causes Flex to draw grid lines both horizontally and vertically. |
| You could also specify <samp class="codeph">horizontal</samp> or <samp class="codeph">vertical</samp> as |
| values for the <samp class="codeph">gridDirection</samp> property.</p> |
| |
| <p>To remove grid lines entirely, you can set the <samp class="codeph">backgroundElements</samp> property to |
| an empty Array, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/NoGridLines.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| <fx:Array id="bge"> |
| </fx:Array> |
| |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="BubbleChart control with no grid lines"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BubbleChart id="bc" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true" |
| backgroundElements="{bge}"> |
| <mx:series> |
| <mx:BubbleSeries |
| xField="profit" |
| yField="expenses" |
| radiusField="amount" |
| displayName="Profit"/> |
| </mx:series> |
| </mx:BubbleChart> |
| <mx:Legend dataProvider="{bc}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can also change the appearance of grid lines by using filters |
| such as a drop shadow, glow, or bevel. For more information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e69_verapache">Using |
| filters with chart controls</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fe8_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fe8_verapache"><!-- --></a> |
| <h3 class="topictitle3">Formatting chart grid lines with |
| CSS</h3> |
| |
| |
| <div> |
| <p>You can set the style of grid lines by applying a CSS style |
| to the <a href="https://flex.apache.org/asdoc/mx/charts/GridLines.html" target="_blank">GridLines</a> object. The |
| following example applies the <samp class="codeph">myStyle</samp> style to |
| the grid lines:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GridLinesFormatCSS.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| |
| <!-- Background element array. --> |
| <fx:Array id="bge"> |
| <mx:GridLines styleName="myStyle"> |
| <mx:horizontalStroke> |
| <mx:SolidColorStroke weight="3"/> |
| </mx:horizontalStroke> |
| <mx:verticalStroke> |
| <mx:SolidColorStroke weight="3"/> |
| </mx:verticalStroke> |
| </mx:GridLines> |
| </fx:Array> |
| </fx:Declarations> |
| |
| <fx:Style> |
| .myStyle { |
| gridDirection:"both"; |
| horizontalShowOrigin:true; |
| horizontalTickAligned:false; |
| horizontalChangeCount:1; |
| verticalShowOrigin:false; |
| verticalTickAligned:true; |
| verticalChangeCount:1; |
| horizontalFill:#990033; |
| horizontalAlternateFill:#00CCFF; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| showDataTips="true" |
| dataProvider="{srv.lastResult.data.result}" |
| backgroundElements="{bge}"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fe7_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fe7_verapache"><!-- --></a> |
| <h3 class="topictitle3">Formatting chart grid lines with |
| ActionScript</h3> |
| |
| |
| <div> |
| <p>You can manipulate the <a href="https://flex.apache.org/asdoc/mx/charts/GridLines.html" target="_blank">GridLines</a> at |
| run time with ActionScript. The following example adds filled grid |
| lines in front of and behind the chart's series:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/GridLinesFormatActionScript.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.graphics.SolidColor; |
| import mx.graphics.SolidColorStroke; |
| import mx.charts.GridLines; |
| |
| [Bindable] |
| public var bge:GridLines; |
| |
| public function addGridLines():void { |
| bge = new GridLines(); |
| |
| var s:SolidColorStroke = new SolidColorStroke(0xff00ff, 2); |
| bge.setStyle("horizontalStroke", s); |
| |
| var f:SolidColor = new SolidColor(0x990033, .3); |
| bge.setStyle("horizontalFill",f); |
| |
| var f2:SolidColor = new SolidColor(0x336699, .3); |
| bge.setStyle("horizontalAlternateFill",f2); |
| |
| myChart.backgroundElements = [bge]; |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| showDataTips="true" |
| dataProvider="{srv.lastResult.data.result}" |
| creationComplete="addGridLines()"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <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}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c42_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c42_verapache"><!-- --></a> |
| <h2 class="topictitle2">Positioning chart axes</h2> |
| |
| |
| <div> |
| <p>You |
| can place axes on the left, right, top, or bottom of the chart control. |
| This includes the axis line as well as labels and any tick marks |
| you added. You can place horizontal axes at the top or bottom of |
| the chart (or both, if you have multiple vertical axes). You can |
| place vertical axes at the left or right of the chart (or both, |
| if you have multiple horizontal axes).</p> |
| |
| <p>To change the location of axes, you use the <samp class="codeph">placement</samp> property |
| of the AxisRenderer. Valid values for this property for a vertical |
| axis are <samp class="codeph">top</samp> and <samp class="codeph">bottom</samp>. Valid values |
| for this property for a horizontal axis are <samp class="codeph">left</samp> and <samp class="codeph">right</samp>.</p> |
| |
| <p>The following example creates a ColumnChart control with the |
| default axis locations (bottom and left). You can select new locations |
| by using the ComboBox controls at the bottom of the panel.</p> |
| |
| <p> |
| |
| </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/AxisPlacementExample.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="700"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| |
| [Bindable] |
| private var horChoices:ArrayCollection = new ArrayCollection(["bottom","top"]); |
| |
| [Bindable] |
| private var vertChoices:ArrayCollection = new ArrayCollection(["left","right"]); |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Variable Axis Placement"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer id="horAxisRend" |
| axis="{axis1}" |
| placement="{myHorBox.selectedItem}"/> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer id="vertAxisRend" |
| axis="{axis2}" |
| placement="{myVertBox.selectedItem}"/> |
| </mx:verticalAxisRenderers> |
| |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="axis1" |
| categoryField="month"/> |
| </mx:horizontalAxis> |
| |
| <mx:verticalAxis> |
| <mx:LinearAxis id="axis2"/> |
| </mx:verticalAxis> |
| |
| <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}"/> |
| |
| <s:Form> |
| <s:FormItem label="Horizontal Axis Location:"> |
| <s:ComboBox id="myHorBox" dataProvider="{horChoices}"/> |
| </s:FormItem> |
| <s:FormItem label="Vertical Axis Location:"> |
| <s:ComboBox id="myVertBox" dataProvider="{vertChoices}"/> |
| </s:FormItem> |
| </s:Form> |
| |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS02f7d8d4857b1677-1edc5375126b420f1f7-8000_verapache"><a name="WS02f7d8d4857b1677-1edc5375126b420f1f7-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">Formatting axis labels with the AxisRenderer |
| class</h2> |
| |
| |
| <div> |
| <p>The appearance of chart axis labels is defined by the AxisRenderer |
| class.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fe5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fe5_verapache"><!-- --></a> |
| <h3 class="topictitle3">Rotating chart axis labels</h3> |
| |
| |
| <div> |
| <p>You can rotate axis labels by using the <samp class="codeph">labelRotation</samp> property |
| of the <a href="https://flex.apache.org/asdoc/mx/charts/AxisRenderer.html" target="_blank">AxisRenderer</a> object. |
| You specify a number from ‑90 to 90, in degrees. If you set the <samp class="codeph">labelRotation</samp> property |
| to <samp class="codeph">null</samp>, Flex determines an optimal angle and renders |
| the axis labels. </p> |
| |
| <p>The following example shows both sets of axis labels rotated |
| 45 degrees:</p> |
| |
| <div class="figborder"> |
| <img src="images/chf_labelrotation.png" alt="A BarChart control showing axis labels rotated 45 degrees."/> |
| </div> |
| |
| <p>To rotate axis labels, you must embed the font in the Flex application. |
| If you rotate the the axis labels without embedding a font, they |
| are rendered horizontally. You must also be sure to set the <samp class="codeph">embedAsCFF</samp> CSS |
| property to <samp class="codeph">false</samp> because chart controls are MX |
| controls and do not use the Spark text rendering engine. The default |
| value of this property is <samp class="codeph">true</samp>.</p> |
| |
| <p>The following <samp class="codeph"><fx:Style></samp> block embeds |
| a font in the Flex application, and then applies that font to the |
| chart control that rotates its horizontal and vertical axis labels |
| 45 degrees:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/RotateAxisLabels.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Style> |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| @font-face{ |
| src: url("../assets/MyriadWebPro.ttf"); |
| fontFamily: myMyriad; |
| embedAsCFF: false; |
| } |
| |
| mx|ColumnChart { |
| fontFamily: myMyriad; |
| fontSize: 20; |
| } |
| </fx:Style> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Rotated Axis Labels"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="column" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis id="a1" |
| categoryField="month" |
| title="FY 2010"/> |
| </mx:horizontalAxis> |
| |
| <mx:verticalAxis> |
| <mx:LinearAxis id="a2"/> |
| </mx:verticalAxis> |
| |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer labelRotation="-90" axis="{a1}"/> |
| </mx:horizontalAxisRenderers> |
| |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer labelRotation="45" axis="{a2}"/> |
| </mx:verticalAxisRenderers> |
| |
| <mx:series> |
| <mx:ColumnSeries displayName="Profit" |
| xField="month" |
| yField="profit"/> |
| <mx:ColumnSeries displayName="Expenses" |
| xField="month" |
| yField="expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{column}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS02f7d8d4857b1677355f601a126b41ed60e-8000_verapache"><a name="WS02f7d8d4857b1677355f601a126b41ed60e-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using a custom AxisRenderer object</h3> |
| |
| |
| <div> |
| <p>To change the appearance of the axis labels, you can use |
| the <samp class="codeph">labelRenderer</samp> property of the AxisRenderer |
| class. This lets you specify a class that defines the appearance |
| of the label. The class must extend UIComponent and implement the IDataRenderer |
| and IFlexDisplayObject interfaces. Its <samp class="codeph">data</samp> property |
| will be the label used in the chart. Typically, you write an ActionScript |
| class that extends the ChartLabel class for the label renderer. </p> |
| |
| <p>The following example defines a custom component inline by using |
| the <samp class="codeph"><fx:Component></samp> tag. It adds ToolTip objects |
| to the labels along the chart's horizontal axis so that the values |
| of the longer labels are not truncated.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/LabelRendererWithToolTips.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| initialize="setupDP()" |
| width="550" height="600"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.collections.ArrayCollection; |
| import mx.charts.ColumnChart; |
| |
| [Bindable] |
| private var ac:ArrayCollection; |
| |
| public function setupDP():void{ |
| ac = new ArrayCollection([ |
| [ "Label 1 is short.", 200000], |
| [ "Label 2 is a fairly long label.", 150000], |
| [ "Label 3 is an extremely long label. It contains 95 characters " + |
| "and will likely be truncated.", 40000] |
| ]); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="bc1" |
| showDataTips="true" |
| dataProvider="{ac}"> |
| <mx:series> |
| <mx:ColumnSeries xField="0" yField="1"/> |
| </mx:series> |
| <mx:verticalAxis> |
| <mx:LinearAxis id="va1"/> |
| </mx:verticalAxis> |
| <mx:horizontalAxis > |
| <mx:CategoryAxis id="ha1" |
| dataProvider="{ac}" |
| categoryField="0"/> |
| </mx:horizontalAxis> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer axis="{ha1}" canDropLabels="false"> |
| <mx:labelRenderer> |
| <fx:Component> |
| <mx:Label toolTip="{this.myTip}"> |
| <fx:Script><![CDATA[ |
| [Bindable] |
| private var myTip:String; |
| |
| override public function set data(value:Object):void{ |
| if(value == null) |
| return; |
| myTip = value.text; |
| var length:int = value.text.toString().length; |
| if (length > 20) { |
| text = value.text.toString().substr(0, 20) + "..."; |
| } else { |
| text = value.text; |
| } |
| } |
| ]]></fx:Script> |
| </mx:Label> |
| </fx:Component> |
| </mx:labelRenderer> |
| </mx:AxisRenderer> |
| </mx:horizontalAxisRenderers> |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer axis="{va1}" canDropLabels="false"/> |
| </mx:verticalAxisRenderers> |
| </mx:ColumnChart> |
| <s:Label id="l1" |
| color="white" |
| text="Hover over the horizontal axis's labels to see the entire title rendered as a ToolTip."/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>For an example of an ActionScript class that extends ChartLabel, |
| see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c39_verapache">Adding |
| axis titles</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c52_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c52_verapache"><!-- --></a> |
| <h2 class="topictitle2">Skinning ChartItem objects</h2> |
| |
| |
| <div> |
| <p>A <a href="https://flex.apache.org/asdoc/mx/charts/ChartItem.html" target="_blank">ChartItem</a> object |
| represents a data point in a series. There is one ChartItem instance |
| for each item in the series' data provider. ChartItem objects contain details |
| about the data for the data point as well as the renderer (or <em>skin</em>) |
| to use when rendering that data point in the series. The ChartItem |
| renderers define objects such as the icon that represents a data |
| point in a <a href="https://flex.apache.org/asdoc/mx/charts/PlotChart.html" target="_blank">PlotChart</a> control |
| or the box that makes up a bar in a <a href="https://flex.apache.org/asdoc/mx/charts/BarChart.html" target="_blank">BarChart</a> control.</p> |
| |
| <p>Each series has a default renderer that Flex uses to draw that |
| series' ChartItem objects. You can specify a new renderer to use |
| with the series' <samp class="codeph">itemRenderer</samp> style property. This |
| property points to a class that defines the appearance of the ChartItem |
| object. </p> |
| |
| <p>The following table lists the available renderer classes for |
| the <a href="https://flex.apache.org/asdoc/mx/charts/ChartItem.html" target="_blank">ChartItem</a> objects of |
| each chart type:</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e2633"> |
| <p>Chart type</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d89669e2639"> |
| <p>Available renderer classes</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2633 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/AreaChart.html" target="_blank">AreaChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2639 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/AreaRenderer.html" target="_blank">AreaRenderer</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2633 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/BarChart.html" target="_blank">BarChart</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/BubbleChart.html" target="_blank">BubbleChart</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/ColumnChart.html" target="_blank">ColumnChart</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/PlotChart.html" target="_blank">PlotChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2639 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/BoxItemRenderer.html" target="_blank">BoxItemRenderer</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/CircleItemRenderer.html" target="_blank">CircleItemRenderer</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/CrossItemRenderer.html" target="_blank">CrossItemRenderer</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/DiamondItemRenderer.html" target="_blank">DiamondItemRenderer</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/ShadowBoxItemRenderer.html" target="_blank">ShadowBoxItemRenderer</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/TriangleItemRenderer.html" target="_blank">TriangleItemRenderer</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2633 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/CandlestickChart.html" target="_blank">CandlestickChart</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/HLOCChart.html" target="_blank">HLOCChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2639 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/CandlestickItemRenderer.html" target="_blank">CandlestickItemRenderer</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/HLOCItemRenderer.html" target="_blank">HLOCItemRenderer</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2633 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/LineChart.html" target="_blank">LineChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2639 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/LineRenderer.html" target="_blank">LineRenderer</a> |
| </p> |
| |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/ShadowLineRenderer.html" target="_blank">ShadowLineRenderer</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2633 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/PieChart.html" target="_blank">PieChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d89669e2639 "> |
| <p> |
| <a href="https://flex.apache.org/asdoc/mx/charts/renderers/WedgeItemRenderer.html" target="_blank">WedgeItemRenderer</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p>The appearance of most renderers is self-explanatory. The <a href="https://flex.apache.org/asdoc/mx/charts/renderers/BoxItemRenderer.html" target="_blank">BoxItemRenderer</a> class draws <a href="https://flex.apache.org/asdoc/mx/charts/ChartItem.html" target="_blank">ChartItem</a> objects |
| in the shape of boxes. The <a href="https://flex.apache.org/asdoc/mx/charts/renderers/DiamondItemRenderer.html" target="_blank">DiamondItemRenderer</a> class draws <a href="https://flex.apache.org/asdoc/mx/charts/ChartItem.html" target="_blank">ChartItem</a> objects |
| in the shape of diamonds. The <a href="https://flex.apache.org/asdoc/mx/charts/renderers/ShadowBoxItemRenderer.html" target="_blank">ShadowBoxItemRenderer</a> and <a href="https://flex.apache.org/asdoc/mx/charts/renderers/ShadowLineRenderer.html" target="_blank">ShadowLineRenderer</a> classes |
| add shadows to the <a href="https://flex.apache.org/asdoc/mx/charts/ChartItem.html" target="_blank">ChartItem</a> objects that |
| they draw.</p> |
| |
| <p>You can use existing classes to change the default renderers |
| of chart items. The <a href="https://flex.apache.org/asdoc/mx/charts/renderers/DiamondItemRenderer.html" target="_blank">DiamondItemRenderer</a> class |
| is the default renderer for ChartItem objects in a data series in |
| a PlotChart control. The following example uses the default DiamondItemRenderer |
| class for the first data series. The second series uses the <a href="https://flex.apache.org/asdoc/mx/charts/renderers/CircleItemRenderer.html" target="_blank">CircleItemRenderer</a> class, |
| which draws a circle to represent the data points in that series. |
| The third series uses the <a href="https://flex.apache.org/asdoc/mx/charts/renderers/CrossItemRenderer.html" target="_blank">CrossItemRenderer</a> class, |
| which draws a cross shape to represent the data points in that series. </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/PlotRenderers.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Plot Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PlotChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| <!-- First series uses default renderer. --> |
| <mx:PlotSeries |
| xField="expenses" |
| yField="profit" |
| displayName="Plot 1"/> |
| |
| <!-- Second series uses CircleItemRenderer. --> |
| <mx:PlotSeries |
| xField="amount" |
| yField="expenses" |
| displayName="Plot 2" |
| itemRenderer="mx.charts.renderers.CircleItemRenderer"/> |
| |
| <!-- Third series uses CrossItemRenderer. --> |
| <mx:PlotSeries |
| xField="profit" |
| yField="amount" |
| displayName="Plot 3" |
| itemRenderer="mx.charts.renderers.CrossItemRenderer"/> |
| </mx:series> |
| </mx:PlotChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>To apply a renderer to a series in ActionScript, you use the <samp class="codeph">setStyle()</samp> method. |
| In that method, you create a new ClassFactory and pass the renderer |
| to its constructor. Flex generates an instance of this class to |
| be the renderer. Be sure to import the appropriate classes when |
| using renderer classes. </p> |
| |
| <p>The following example sets the renderer for the second series |
| to the CircleItemRenderer and the renderer for the third series |
| to the CrossItemRenderer in ActionScript.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/PlotRenderersAS.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send();initSeriesStyles();" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.charts.renderers.*; |
| |
| private function initSeriesStyles():void { |
| // Second series uses CircleItemRenderer. |
| series2.setStyle("itemRenderer", new ClassFactory(mx.charts.renderers.CircleItemRenderer)); |
| |
| // Third series uses CrossItemRenderer. |
| series3.setStyle("itemRenderer", new ClassFactory(mx.charts.renderers.CrossItemRenderer)); |
| } |
| |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Plot Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PlotChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| <mx:PlotSeries |
| id="series1" |
| xField="expenses" |
| yField="profit" |
| displayName="Plot 1"/> |
| |
| <mx:PlotSeries |
| id="series2" |
| xField="amount" |
| yField="expenses" |
| displayName="Plot 2"/> |
| |
| <mx:PlotSeries |
| id="series3" |
| xField="profit" |
| yField="amount" |
| displayName="Plot 3"/> |
| </mx:series> |
| </mx:PlotChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fe3_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fe3_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using multiple renderer classes</h3> |
| |
| |
| <div> |
| <p>You can sometimes choose from more than one renderer for |
| a chart series, depending on the series. These renderers let you |
| change the appearance of your charts by adding shadows or graphics |
| to the chart items. </p> |
| |
| <p>Some series types require multiple renderers to completely render |
| their data. For example, a LineSeries object has both an <samp class="codeph">itemRenderer</samp> style |
| property and a <samp class="codeph">lineSegmentRenderer</samp> style property. |
| The <samp class="codeph">itemRenderer</samp> property specifies the renderer |
| for the data items. The <samp class="codeph">lineSegmentRenderer</samp> specifies |
| the appearance of the line segments between items. </p> |
| |
| <p>The other series type that requires two renderers is the <a href="https://flex.apache.org/asdoc/mx/charts/series/AreaSeries.html" target="_blank">AreaSeries</a>. |
| The <samp class="codeph">areaRenderer</samp> property specifies the appearance |
| of the area, and the <samp class="codeph">itemRenderer</samp> specifies the |
| appearance of the data items.</p> |
| |
| <p>You can also specify the renderer to use for legends. The default |
| is the class that the series' <samp class="codeph">itemRenderer</samp> property |
| specifies. For more information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c38_verapache">Formatting |
| Legend controls</a>.</p> |
| |
| <p>You can use multiple types of data series in a single chart. |
| For example, you can use a <a href="https://flex.apache.org/asdoc/mx/charts/series/ColumnSeries.html" target="_blank">ColumnSeries</a> and |
| a <a href="https://flex.apache.org/asdoc/mx/charts/series/LineSeries.html" target="_blank">LineSeries</a> to |
| show something like a moving average over a stock price. In this |
| case, you can use all the renderers supported by those series in |
| the same chart. For more information on using multiple series, see <a href="flx_charts_types_cht.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6c_verapache">Using multiple |
| data series</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c50_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c50_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating custom renderers</h3> |
| |
| |
| <div> |
| <p>You can replace the <samp class="codeph">itemRenderer</samp> property |
| of a chart series with a custom renderer. You define the renderer |
| on the <samp class="codeph">itemRenderer</samp> style property for the chart |
| series. This renderer can be a graphical renderer or a class that |
| programmatically defines the renderer. </p> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fe1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fe1_verapache"><!-- --></a> |
| <h4 class="topictitle4">Creating graphical renderers</h4> |
| |
| |
| <div> |
| <p>You can use a graphic file such as a GIF or JPEG to be |
| used as a renderer on the chart series. You do this by setting the |
| value of the <samp class="codeph">itemRenderer</samp> style property to be |
| an embedded image. This method of graphically rendering chart items |
| is similar to the graphical skimming method used for other components, |
| as described in <a href="flx_skinning_sk.html#WS2db454920e96a9e51e63e3d11c0bf69084-7f8f_verapache">Creating |
| graphical skins for MX components</a>.</p> |
| |
| <p>The following example uses the graphic file to represent data |
| points on a <a href="https://flex.apache.org/asdoc/mx/charts/PlotChart.html" target="_blank">PlotChart</a> control: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/CustomPlotRenderer.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Plot Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PlotChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| <!-- First series uses embedded image for renderer. --> |
| <mx:PlotSeries |
| xField="expenses" |
| yField="profit" |
| displayName="Plot 1" |
| itemRenderer="@Embed(source='../assets/butterfly.gif')" |
| radius="20" |
| legendMarkerRenderer="@Embed(source='../assets/butterfly.gif')"/> |
| |
| <!-- Second series uses CircleItemRenderer. --> |
| <mx:PlotSeries |
| xField="amount" |
| yField="expenses" |
| displayName="Plot 2" |
| itemRenderer="mx.charts.renderers.CircleItemRenderer"/> |
| |
| <!-- Third series uses CrossItemRenderer. --> |
| <mx:PlotSeries |
| xField="profit" |
| yField="amount" |
| displayName="Plot 3" |
| itemRenderer="mx.charts.renderers.CrossItemRenderer"/> |
| </mx:series> |
| </mx:PlotChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>This example uses the butterfly.gif graphic to represent each |
| data point on the plot chart. It controls the size of the embedded |
| image by using the <samp class="codeph">radius</samp> style property. </p> |
| |
| <p>You are not required to set the value of the <samp class="codeph">itemRenderer</samp> property |
| inline. You can also embed a graphic file in ActionScript as a Class, |
| pass it to the ClassFactory class's constructor, and then reference |
| it inline, as the following example shows: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/CustomPlotRendererAS.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.core.BitmapAsset; |
| |
| [Bindable] |
| [Embed(source="../assets/butterfly.gif")] |
| public var myButterfly:Class; |
| |
| [Bindable] |
| public var myButterflyFactory:ClassFactory = new ClassFactory(myButterfly); |
| |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Plot Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PlotChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| |
| <!-- First series uses custom class renderer. --> |
| <mx:PlotSeries |
| id="series1" |
| xField="expenses" |
| yField="profit" |
| displayName="Plot 1" |
| itemRenderer="{myButterflyFactory}" |
| legendMarkerRenderer="{myButterflyFactory}" |
| radius="20"/> |
| |
| <!-- Second series uses CircleItemRenderer. --> |
| <mx:PlotSeries |
| id="series2" |
| xField="amount" |
| yField="expenses" |
| displayName="Plot 2" |
| itemRenderer="mx.charts.renderers.CircleItemRenderer"/> |
| |
| <!-- Third series uses CrossItemRenderer. --> |
| <mx:PlotSeries |
| id="series3" |
| xField="profit" |
| yField="amount" |
| displayName="Plot 3" |
| itemRenderer="mx.charts.renderers.CrossItemRenderer"/> |
| </mx:series> |
| </mx:PlotChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can also use the <samp class="codeph">setStyle()</samp> method to apply |
| the custom class to the item renderer. The following example sets |
| the <samp class="codeph">itemRenderer</samp> and <samp class="codeph">legendMarkerRenderer</samp> style |
| properties to the embedded image:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/CustomPlotRendererStyles.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send();setStylesInit();" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.core.BitmapAsset; |
| |
| [Bindable] |
| [Embed(source="../assets/butterfly.gif")] |
| public var myButterfly:Class; |
| |
| private function setStylesInit():void { |
| series1.setStyle("itemRenderer", new ClassFactory(myButterfly)); |
| series1.setStyle("legendMarkerRenderer", new ClassFactory(myButterfly)); |
| } |
| ]]></fx:Script> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Plot Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PlotChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| |
| <!-- First series uses custom class renderer. --> |
| <mx:PlotSeries |
| id="series1" |
| xField="expenses" |
| yField="profit" |
| displayName="Plot 1" |
| radius="20"/> |
| |
| <!-- Second series uses CircleItemRenderer. --> |
| <mx:PlotSeries |
| id="series2" |
| xField="amount" |
| yField="expenses" |
| displayName="Plot 2" |
| itemRenderer="mx.charts.renderers.CircleItemRenderer"/> |
| |
| <!-- Third series uses CrossItemRenderer. --> |
| <mx:PlotSeries |
| id="series3" |
| xField="profit" |
| yField="amount" |
| displayName="Plot 3" |
| itemRenderer="mx.charts.renderers.CrossItemRenderer"/> |
| </mx:series> |
| </mx:PlotChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fe0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fe0_verapache"><!-- --></a> |
| <h4 class="topictitle4">Creating programmatic renderers</h4> |
| |
| |
| <div> |
| <p>Creating a custom renderer class for your chart items can |
| give you more control than creating simple graphical renderers. |
| Using class-based renderers is very similar to using programmatic |
| skins, as described in <a href="flx_skinning_sk.html#WS2db454920e96a9e51e63e3d11c0bf69084-7f8e_verapache">Creating |
| programmatic skins for MX components</a>.</p> |
| |
| <p>One approach to is to extend the <a href="https://flex.apache.org/asdoc/mx/skins/ProgrammaticSkin.html" target="_blank">ProgrammaticSkin</a> class |
| and implement the <a href="https://flex.apache.org/asdoc/mx/core/IDataRenderer.html" target="_blank">IDataRenderer</a> interface. |
| In this approach, you can provide all of the logic for drawing chart |
| items in your custom class, and maintain the greatest control over its |
| appearance. For example, you use methods in the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html" target="_blank">Graphics</a> class |
| to draw and fill the rectangles of the bars in a BarChart control. </p> |
| |
| <p>When you implement the IDataRenderer interface, you must define |
| a setter and getter method to implement the <samp class="codeph">data</samp> property. |
| This <samp class="codeph">data</samp> property is of the type of the series |
| item. In the case of a ColumnSeries, it is a <a href="https://flex.apache.org/asdoc/mx/charts/series/items/ColumnSeriesItem.html" target="_blank">ColumnSeriesItem</a>. Other |
| item types include <a href="https://flex.apache.org/asdoc/mx/charts/series/items/BarSeriesItem.html" target="_blank">BarSeriesItem</a>, <a href="https://flex.apache.org/asdoc/mx/charts/series/items/BubbleSeriesItem.html" target="_blank">BubbleSeriesItem</a>, <a href="https://flex.apache.org/asdoc/mx/charts/series/items/LineSeriesItem.html" target="_blank">LineSeriesItem</a>, |
| and <a href="https://flex.apache.org/asdoc/mx/charts/series/items/PlotSeriesItem.html" target="_blank">PlotSeriesItem</a>.</p> |
| |
| <p>In your class, you override the <a href="https://flex.apache.org/asdoc/mx/skins/ProgrammaticSkin.html#updateDisplayList()" target="_blank">updateDisplayList()</a> method |
| with the logic for drawing the chart item as well as setting any |
| custom properties. You should also call the <samp class="codeph">super.updateDisplayList()</samp> method.</p> |
| |
| <p>The following example renders the chart items and uses an Array |
| of colors to color each column in the ColumnChart control differently:</p> |
| |
| <pre class="codeblock">// charts/CycleColorRenderer.as |
| |
| package { // Empty package. |
| |
| import mx.charts.series.items.ColumnSeriesItem; |
| import mx.skins.ProgrammaticSkin; |
| import mx.core.IDataRenderer; |
| import flash.display.Graphics; |
| |
| public class CycleColorRenderer extends mx.skins.ProgrammaticSkin |
| implements IDataRenderer { |
| |
| private var colors:Array = [0xCCCC99,0x999933,0x999966]; |
| private var _chartItem:ColumnSeriesItem; |
| |
| public function CycleColorRenderer() { |
| // Empty constructor. |
| } |
| |
| public function get data():Object { |
| return _chartItem; |
| } |
| |
| public function set data(value:Object):void { |
| _chartItem = value as ColumnSeriesItem; |
| invalidateDisplayList(); |
| } |
| |
| override protected function |
| updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void { |
| super.updateDisplayList(unscaledWidth, unscaledHeight); |
| var g:Graphics = graphics; |
| g.clear(); |
| g.beginFill(colors[(_chartItem == null)? 0:_chartItem.index]); |
| g.drawRect(0, 0, unscaledWidth, unscaledHeight); |
| g.endFill(); |
| } |
| } // Close class. |
| } // Close package.</pre> |
| |
| <p>In your Flex application, you use this class as the renderer |
| by using the <samp class="codeph">itemRenderer</samp> property of the ColumnSeries, |
| as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ProgrammaticRenderer.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="ColumnChart control with a programmatic ItemRenderer"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <fx:Array> |
| <mx:ColumnSeries |
| xField="month" |
| yField="expenses" |
| displayName="Expenses" |
| itemRenderer="CycleColorRenderer"/> |
| </fx:Array> |
| </mx:series> |
| </mx:ColumnChart> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>For more information on overriding the <samp class="codeph">updateDisplayList()</samp> method, |
| see <a href="flx_skinning_sk.html#WS2db454920e96a9e51e63e3d11c0bf69084-7f74_verapache">Implementing |
| the updateDisplayList() method</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c38_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c38_verapache"><!-- --></a> |
| <h2 class="topictitle2">Formatting Legend controls</h2> |
| |
| |
| <div> |
| <p>The <a href="https://flex.apache.org/asdoc/mx/charts/Legend.html" target="_blank">Legend</a> control |
| is a subclass of UIComponent. You can use all the standard style |
| properties to format the Legend control. Also, the Legend control |
| has properties (such as <samp class="codeph">labelPlacement</samp>, <samp class="codeph">markerHeight</samp>, |
| and <samp class="codeph">markerWidth)</samp> that you can use to format its |
| appearance. For information on creating Legend controls, see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c3e_verapache">Using |
| Legend controls</a>.</p> |
| |
| <div class="p">The following example sets styles by using CSS on the Legend |
| control:<pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/FormattedLegend.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Style> |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| mx|Legend { |
| labelPlacement:left; |
| markerHeight:30; |
| markerWidth:30; |
| } |
| </fx:Style> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Bar Chart with Legend"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:BarSeries |
| yField="month" |
| xField="profit" |
| displayName="Profit"/> |
| <mx:BarSeries |
| yField="month" |
| xField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application> </pre> |
| |
| </div> |
| |
| <p>You can also change the appearance of the lines on the LegendItem |
| object's marker. You do this with the <samp class="codeph">stroke</samp> property |
| or the <samp class="codeph">legendMarkerRenderer</samp> property. For more |
| information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c65_verapache">Using |
| strokes with chart controls</a>.</p> |
| |
| <p>You can place a Legend control anywhere in your application, |
| as long as the control has access to the scope of the chart's data. |
| You can place the Legend control in your application without a container, |
| inside the same container as the chart, or in its own container, |
| such as a Panel container. The latter technique gives the Legend |
| control a border and title bar, and lets you use the <samp class="codeph">title</samp> attribute of |
| the Panel to create a title for the Legend control, as the following |
| example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/LegendInPanel.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Bar Chart with Legend in Panel"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:BarSeries |
| xField="amount" |
| displayName="Amount (in $USD)"/> |
| <mx:BarSeries |
| xField="expenses" |
| displayName="Expenses (in $USD)"/> |
| <mx:BarSeries |
| xField="profit" |
| displayName="Profit (in $USD)"/> |
| </mx:series> |
| </mx:BarChart> |
| <s:Panel title="Legend"> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Panel> |
| |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fde_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fde_verapache"><!-- --></a> |
| <h3 class="topictitle3">Setting the direction of legends</h3> |
| |
| |
| <div> |
| <p>The <samp class="codeph">direction</samp> property is a commonly used |
| property to set on the Legend Control. This property of the <samp class="codeph"><mx:Legend></samp> tag |
| causes the <a href="https://flex.apache.org/asdoc/mx/charts/LegendItem.html" target="_blank">LegendItem</a> objects to |
| line up horizontally or vertically. The default value of <samp class="codeph">direction</samp> is <samp class="codeph">vertical</samp>; |
| when you use this value, Flex stacks the LegendItem objects one |
| on top of the other. </p> |
| |
| <p>The following example sets the <samp class="codeph">direction</samp> property |
| to <samp class="codeph">horizontal</samp>:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/HorizontalLegend.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Bar Chart with Legend"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:BarChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:BarSeries |
| xField="amount" |
| displayName="Amount (in $USD)"/> |
| <mx:BarSeries |
| xField="expenses" |
| displayName="Expenses (in $USD)"/> |
| <mx:BarSeries |
| xField="profit" |
| displayName="Profit (in $USD)"/> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}" direction="horizontal"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>The following example shows the Legend with the <samp class="codeph">direction</samp> property |
| set to <samp class="codeph">horizontal</samp>:</p> |
| |
| <div class="figborder"> |
| <img src="images/chf_horizontaldirection.png" alt="A chart with a Legend that has the direction property set to horizontal."/> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65816-7fdd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65816-7fdd_verapache"><!-- --></a> |
| <h3 class="topictitle3">Formatting the legend markers</h3> |
| |
| |
| <div> |
| <p>You can define the appearance of the legend markers by |
| using a programmatic renderer class. Flex includes several default |
| renderer classes that you can use for legend markers. </p> |
| |
| <p>You can change the renderer of the LegendItem object from the |
| default to one of the ChartItem renderers by using the series' <samp class="codeph">legendMarkerRenderer</samp> style property. |
| This property specifies the class to use when rendering the marker |
| in all associated legends.</p> |
| |
| <p>The following example overrides the default renderers and sets |
| the legend markers of all three series to the <a href="https://flex.apache.org/asdoc/mx/charts/renderers/DiamondItemRenderer.html" target="_blank">DiamondItemRenderer</a> class:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/CustomLegendRenderer.mxml --> |
| <s:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| creationComplete="srv.send()" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Plot Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PlotChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:series> |
| <!-- |
| Each series uses the default renderer for |
| the ChartItems, but uses the DiamondItemRenderer |
| for legend markers. |
| --> |
| <mx:PlotSeries |
| xField="expenses" |
| yField="profit" |
| displayName="Plot 1" |
| legendMarkerRenderer= |
| "mx.charts.renderers.DiamondItemRenderer"/> |
| |
| <mx:PlotSeries |
| xField="amount" |
| yField="expenses" |
| displayName="Plot 2" |
| legendMarkerRenderer= |
| "mx.charts.renderers.DiamondItemRenderer"/> |
| |
| <mx:PlotSeries |
| xField="profit" |
| yField="amount" |
| displayName="Plot 3" |
| legendMarkerRenderer= |
| "mx.charts.renderers.DiamondItemRenderer"/> |
| </mx:series> |
| </mx:PlotChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>If you do not explicitly set the <samp class="codeph">legendMarkerRenderer</samp> property, |
| the property uses the default class that the series' <samp class="codeph">itemRenderer</samp> style |
| property specifies. Each series has a default renderer that is used |
| if neither of these style properties is specified.</p> |
| |
| <p>You can create your own custom legend marker class. Classes used |
| as legend marker renderers must implement the <a href="https://flex.apache.org/asdoc/mx/core/IFlexDisplayObject.html" target="_blank">IFlexDisplayObject</a> interface |
| and, optionally, the <a href="https://flex.apache.org/asdoc/mx/styles/ISimpleStyleClient.html" target="_blank">ISimpleStyleClient</a> and <a href="https://flex.apache.org/asdoc/mx/core/IDataRenderer.html" target="_blank">IDataRenderer</a> interfaces.</p> |
| |
| <p>For more information on available renderer classes, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c52_verapache">Skinning |
| ChartItem objects</a>.</p> |
| |
| <p/> |
| |
| </div> |
| |
| <div> |
| <p><strong>Navigation</strong></p> |
| <p><a href="index.html">Using Flex</a> » <a href="flx_p4_using_ddui_components.html">Using data-driven UI components</a></p> |
| </div> |
| |
| </div> |
| <p>Adobe and Adobe Flash are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p> |
| |
| </div> |
| |
| |
| </body> |
| </html> |
