<?xml version="1.0" encoding="utf-8"?><!--Copyright (c) 2009 Team Axiis
Permission is hereby granted, free of charge, to any personobtaining a copy of this software and associated documentationfiles (the "Software"), to deal in the Software withoutrestriction, including without limitation the rights to use,copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom theSoftware is furnished to do so, subject to the followingconditions:
The above copyright notice and this permission notice shall beincluded in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIESOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE ANDNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHTHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISINGFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OROTHER DEALINGS IN THE SOFTWARE.--><mx:Canvas xmlns:mx= "http://www.adobe.com/2006/mxml"xmlns:charts= "org.axiis.charts.*"xmlns:axiis= "org.axiis.*"xmlns:series= "org.axiis.charts.series.*"xmlns:groupings= "org.axiis.charts.groupings.*"xmlns:degrafa= "http://www.degrafa.com/2007"xmlns:states= "org.axiis.states.*"xmlns:paint= "org.axiis.paint.*"xmlns:Examples= "Examples.*"xmlns:axis= "org.axiis.charts.axis.*"xmlns:labels= "org.axiis.charts.labels.*"xmlns:utils= "org.axiis.utils.*" xmlns:scale= "org.axiis.layouts.scale.*" >
<mx:Script><![CDATA[import org.axiis.data.DataSet;
private var ds:DataSet = new DataSet();/*** This example is using xml data read from the file system.* In practical usage, you'ld have some data in a model that you want to display* that may be XML or may be in arrayCollections or arrays. In most cases, you'll* need to massage the data into a format that's suitable for the display you're* trying to achieve.*/public function start():void{funding.dataProvider = fundingDatahAxis.invalidateDataProvider()vAxis.invalidateDataProvider()funding.invalidateDataProvider()// Has to be called any time the dataCanvas dp is changeddc.invalidateDisplayList();}
/*** The labelFunction property of the LineSeriesGroup, and other components, allow you to* to determine how each to format each label the component displays*/private function axisLabel(obj:Object):String{return formatter.format(Number(obj));}]]></mx:Script>
<mx:CurrencyFormatter currencySymbol= "M"precision= "0"id= "formatter"alignSymbol= "right"useThousandsSeparator= "true" />
<!-- GLOBAL VARIABLES --><mx:Object id= "fundingData" /><mx:Object id= "years" /><mx:String id= "verticalField" /><mx:Number id= "percentGap" >.02 </mx:Number>
<!--A scale that deals with linear numeric data.--><scale:LinearScale id= "vScale"minLayout= "0"maxLayout= "{funding.height}"/>
<!--A scale that converts categorical (String) data into layout space. The categories are assumed to be sorted alphabetically.--><scale:CategoricalScale id= "hScale"dataProvider= "{years}"minLayout= "0"maxLayout= "{funding.width}"/>
<!--DataCanvas manages the placement and the rendering of layouts.They can have backgroundGeometries, foregroundGeometries, and layouts.They inherit from Canvas--><axiis:DataCanvas width= "80%"id= "dc"top= "120"bottom= "100"horizontalCenter= "0"strokes= "{strokes}"fills= "{fills}"palettes= "{palettes}"showDataTips= "true" >
<!-- Background --><!-- backgrounds appear behind the graph. There are also foregroundGeometries for doing annotations on top of the graphverticalScale="{vScale}" The vertical scale used for scaling data to actual screen unitstickStroke="{axisStroke}" The stroke used to put the hash or tick marks on an axiswidth="{dc.width}"height="{funding.height}"showDataTips="false" A flag that indicates to DataCanvas that it should listen for mouse events that signal the need to create a data tip.showGridArea="false" Whether or not the grid cells are displayedshowGridLine="false" Whether or not lines are drawn between grid cellsshowLabels="false" Whether or not to show labels on the axisfontFamily="Myriad Pro"fontColor="0"fontSize="14"tickGap="5"majorTickSpacing="50" The space between successive major tick marks. There is also a minorTickSpacing. Length of marks can be adjusted as well majorTickLengthlabelFunction="{axisLabel}" A function that is used to determine how each item in the dataProvider should be labeled along the axis.--><axiis:backgroundGeometries><!--VAxis renders values from bottom to top between a minimum and maximum value, and is intended to be rendered to the left of other layouts to provide a point of reference for those visualizations.VAxis can optionally label each major tick mark or render gridlines aligned to the axis itself.--><axis:VAxisid= "vAxis"verticalScale= "{vScale}"tickStroke= "{axisStroke}"width= "{dc.width}"height= "{funding.height}"showDataTips= "false"fontFamily= "Myriad Pro"fontColor= "0"fontSize= "14"tickGap= "5"majorTickSpacing= "50"labelFunction= "{axisLabel}" /><!--HCategoryAxis renders values from left to right between a indexed collection of string values and is intended to be rendered beneath other layouts to provide a point of reference for those visualizations.HCategory Axis trys to optmize its layout based on the maximum widht/length of all labels in collection--><axis:HCategoryAxisid= "hAxis"x= "{funding.x}"categoryScale= "{this.hScale}"width= "{funding.width}"dataProvider= "{hScale.dataProvider}"height= "50"y= "{funding.height}" /><!-- this is the actual x axis line --><degrafa:Linex= "0"x1= "{funding.x+funding.width}"y= "{funding.height}"y1= "{funding.height}"stroke= "{axisStroke}" /></axiis:backgroundGeometries>
<!-- Layouts --><!--Layouts are composite components consisting of ReferenceRepeaters (theloop that defines a repeated bounding pattern) DrawingGeometries(what you are going to draw) and Layouts (child layouts)--><axiis:layouts>
<!-- LineSeriesGroupLine series group renders multiple lines for a series of data points. This can be used to create visualizations that use curved surfaces such as stream graphs and line charts.x="12" x-location relative to pareny="0" y-location relative to parentheight="{dc.height-70}" height of display essentiallywidth="{dc.width}" widthtension="{tension.value}" The tension used to render the curves in this chart. A value of 0 results in straight lines while a value of 1 results in exaggerated Bezier curves.markerColor="{areaPalette.currentColor}" The color at the center of the markers.dataFilterFunction="{filterRows}" This provides a way to further refine a layouts dataProvider by providing access to a custom filter data filter function.This allows developers to easily visualize subsets of the data without having to change the underlying data structure.showArea="{area.selected}" Whether the area beneath the lines should be filled.plotFilterFunction="{filterColumns}" A filter function that will be used to determine whether a given data point should be included in the rendering.markerSize="8" The diameter in pixels of the markers shown at each data point.showMarker="{showMarker.selected}" Whether or not markers should be displayed at each data pointmode="{int(layoutGroup.selectedValue)}" The layout mode used to render the lines. One of {MODE_BASELINE,MODE_STACK_ZERO,MODE_STACK_FLOW}.dataProvider="{dataProvider}" EG: var myLines is an ArrayCollection || Array of LineLine is an object that has a name property, a plotPointsCollection property of PlotPoint, and an optional index which would be it's order in myLinesPlotPoint is an object with an index property, an xvalue property used for display of text or the x-value, and a yvalue property which is the y-valueplotCollection="columns" The name of the property on the objects in the dataProvider that contains the data to plotIt is expected that the plot collection is a collection of objects - like Array or ArrayCollection and contains the series of data to be plotted.i.e. dataProvider=myLines is Array || ArrayCollection myLines[0].myPlotCollection is Array || ArrayCollectiondataField="value" The property within each item in the dataProvider that contains the field used to determine the value of the item. (essentially the y value)labelField="pivotName" The property within each item in the dataProvider that contains the field used to determine the label for the item.xDataField="name" The property within each item in the dataProvider that contains the field used to determine the value of the item on the horizontal axis.plotLabelField="name" The property on the items in the dataProvider that contains the label field for the entire plot.verticalScale="{vScale}" The vertical scale, IScale, used to scale data values to chart valueshorizontalScale="{hScale}" The horizontal scale, IScale, used to scale data values to chart valuesstroke="{myStroke}" The stroke used to render linesfill="{areaFill}" The fill used to render the area beneath the lines if area rendering is enabled.enableRollOver="true" Turns on/off the default roll-over statecurrentDatum The item in the dataProvider that the layout is currently rendering.currentIndex The index of the item in the dataProvider that the layout is currently rendering.currentLabel The label of the item in the dataProvider that the layout is currently rendering, as determine by taking currentDatum[labelField], if a labelField is defined.currentReference The geometry that is being used to render the current data item as it appears after the necessary iterations of the referenceRepeater have been executed.currentValue The value of the item in the dataProvider that the layout is currently rendering, as determined by taking currentDatum[dataField], if a dataField is defined.--><groupings:LineSeriesGroup id= "funding"x= "12"y= "0"autoAdjustScale= "true"height= "{dc.height-70}"width= "{dc.width}"tension= ".04"markerColor= "{areaPalette.currentColor}"showArea= "true"markerSize= "8"showMarker= "{false}"mode= "{LineSeriesGroup.MODE_STACK_ZERO}"dataProvider= "{fundingData}"plotCollection= "columns"dataField= "value"xDataField= "name"plotLabelField= "value"verticalScale= "{vScale}"horizontalScale= "{hScale}"stroke= "{myStroke}"fill= "{areaFill}"enableRollOver= "true" />
</axiis:layouts>
</axiis:DataCanvas>
<!-- PALLETTES & FILLS & STROKES -->
<!--LayoutPalette will generate an Array of colors based on a Layout. The produced colors will be equally distributed between two given anchor colorsand will contain x values where x is the number of objects in the Layout's dataProvider. As the Layout renders and its currentIndex property is incremented,the LayoutPalette's currentColor will be incremented as well. Binding on the currentColor allows you vary the color of a fill or stroke usedin the Layout's drawingGeometries as the Layout renders. Very cool.LayoutPalette will generates an Array of colors for a Layout. By default, LayoutPalette uses the Flex 3 Halo color scheme, but this can be overridden usingthe colors property. As the currentIndex of the Layout driving this palette changes, the currentColor property is updated to the color at the currentIndex inthe array. If the layout needs more colors than the array contains, the colors wraps around the array using the mod operator.NOTE: The major difference between Layout and LayoutAuto:Layout works off of currentIndex for a layout so you only get as many colors as there are for that index valuesLayoutAuto works off the length of the dataProvider to decide how manu colors to generate so there will be many more colorsIf you want a series with repeating colors from series to series use Layout.If you want different colors for all bars, use LayoutAuto--><mx:Array id= "palettes" ><paint:LayoutAutoPalette id= "outerPalette" layout= "{funding}" colorFrom= "0xCC3333" colorTo= "0x3333CC" /><paint:LayoutAutoPalette id= "clusterPalette" layout= "{funding}" colorFrom= "{outerPalette.currentColor}" colorTo= "{outerPalette.currentColor | 0x337f00}" /><paint:LayoutAutoPalette id= "areaPalette" layout= "{funding}" colorFrom= "0x3333CC" colorTo= "0xCC3333" /></mx:Array>
<!--A LinearGradientFill lets you specify a gradient fillangle defines the transition across the contentA GradientStop defines the objects that control a transition as part of a gradient fill. Stops will be equally spaced unless ratio is specified--><mx:Array id= "fills" ><degrafa:LinearGradientFill id= "areaFill" angle= "90" enableEvents= "false" ><degrafa:GradientStop color= "{areaPalette.currentColor}" alpha= ".95" /><degrafa:GradientStop color= "{areaPalette.currentColor | 0x999933}" alpha= ".65" /></degrafa:LinearGradientFill><degrafa:LinearGradientFill id= "clusterFill" angle= "45" enableEvents= "false" ><degrafa:GradientStop color= "{clusterPalette.currentColor}" /><degrafa:GradientStop color= "{clusterPalette.currentColor | 0xFFFFFF}" alpha= ".85" /></degrafa:LinearGradientFill></mx:Array>
<!--LinearGradientStroke is gradient filled stroke as opposed to just one color. pixelHinting is used to hint strokes to full pixels.SolidStroke is typicaly solid stroke. caps define line ends and can put additional lenght on a line. Useful where lines overlap--><mx:Array id= "strokes" ><degrafa:LinearGradientStroke id= "colStroke" pixelHinting= "true" angle= "45" enableEvents= "false" ><degrafa:GradientStop color= "0xFFFFFF" alpha= ".7" /><degrafa:GradientStop color= "0xFFFFFF" alpha= ".3" /></degrafa:LinearGradientStroke><degrafa:SolidStrokecolor= "0xFFFFFF"alpha= ".3" /><degrafa:SolidStrokeid= "axisStroke"color= "0x222222"pixelHinting= "true" /><degrafa:SolidStrokeid= "myStroke"color= "{areaPalette.currentColor}"weight= "1"alpha= "1"caps= "none"pixelHinting= "true" /></mx:Array>
</mx:Canvas>
LineSeriesChart.mxml
最新推荐文章于 2022-01-26 18:34:41 发布