charts.as

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

		}
		
		/**
		 * @private (protected)
		 * Since Chart is a Flash CS3 component, we should call drawNow() to be sure it updates properly.
		 */
		override protected function refreshComponentSize():void
		{
			super.refreshComponentSize();
			
			if(this.backgroundAndBorder)
			{
				this.backgroundAndBorder.width = this.stage.stageWidth;
				this.backgroundAndBorder.height = this.stage.stageHeight;
				this.backgroundAndBorder.drawNow();
			}
			
			if(this.chart)
			{
				this.chart.x = this.chart.y = this.backgroundAndBorder.borderWeight + this.padding;
				this.chart.width -= 2 * (this.backgroundAndBorder.borderWeight + this.padding);
				this.chart.height -= 2 * (this.backgroundAndBorder.borderWeight + this.padding);
				if(this.legend && this.legendDisplay != "none")
				{
					this.legend.visible = true;
					//we need to draw because the legend resizes itself
					this.legend.drawNow();
					
					if(this.legendDisplay == "left" || this.legendDisplay == "right")
					{
						if(this.legendDisplay == "left")
						{
							this.legend.x = this.backgroundAndBorder.borderWeight + this.padding;
							this.chart.x = this.legend.x + this.legend.width + this.spacing;
						}
						else //right
						{
							this.legend.x = this.stage.stageWidth - this.backgroundAndBorder.borderWeight - this.legend.width - padding;
						}
						//center vertically
						this.legend.y = Math.max(0, (this.stage.stageHeight - this.legend.height) / 2);
						this.chart.width -= (this.legend.width + this.spacing);
					}
					else //top or bottom
					{
						if(this.legendDisplay == "top")
						{
							this.legend.y = this.backgroundAndBorder.borderWeight + this.padding;
							this.chart.y = this.legend.y + this.legend.height + this.spacing;
						}
						else //bottom
						{
							this.legend.y = this.stage.stageHeight - this.backgroundAndBorder.borderWeight - this.legend.height - padding;
						}
						//center horizontally
						this.legend.x = Math.max(0, (this.stage.stageWidth - this.legend.width) / 2);
						this.chart.height -= (this.legend.height + this.spacing);
					}
						
					//we disable animation temporarily because we don't want the markers
					//sliding around because the legend resized
					if(this.legend && this.legendDisplay != "none")
					{
						var oldAnimationEnabled:Boolean = UIComponentUtil.getStyleValue(this.chart, "animationEnabled");
						this.chart.setStyle("animationEnabled", false);
						this.chart.drawNow();
						this.chart.setStyle("animationEnabled", oldAnimationEnabled);
					}
				}
				else
				{
					this.legend.visible = false;
				}
				this.chart.drawNow();
			}
		}
		
		/**
		 * @private (protected)
		 * Logs errors for the background image loading.
		 */
		protected function backgroundErrorHandler(event:ErrorEvent):void
		{
			this.log(event.text, LoggerCategory.ERROR);
		}
		
		/**
		 * @private (protected)
		 * 
		 * Receives chart item mouse events and passes them out to JavaScript.
		 */
		protected function chartItemEventHandler(event:ChartEvent):void
		{
			var type:String = event.type.replace("Roll", "Mouse");
			type += "Event";
			var seriesIndex:int = (this.chart.dataProvider as Array).indexOf(event.series);
			var itemEvent:Object = {type: type, seriesIndex: seriesIndex, index: event.index, item: event.item, x: this.mouseX, y: this.mouseY};
			this.dispatchEventToJavaScript(itemEvent);
		}
		
		private var _lastMouseItem:ISeriesItemRenderer;
		
		protected function chartItemExtraEventHandler(event:MouseEvent):void
		{
			var dragEventType:String = "itemDragEvent";
			var renderer:ISeriesItemRenderer = this._lastMouseItem;
			this._lastMouseItem = null;
			if(event.type == MouseEvent.MOUSE_DOWN)
			{
				//crawl up until we get to the chart or an item renderer
				var displayObject:DisplayObject = event.target as DisplayObject;
				while(!(displayObject is ISeriesItemRenderer) && !(displayObject is Chart))
				{
					displayObject = displayObject.parent;
				}
				
				if(displayObject is ISeriesItemRenderer)
				{
					renderer = ISeriesItemRenderer(displayObject);
				
					this.stage.addEventListener(MouseEvent.MOUSE_MOVE, chartItemExtraEventHandler);
					this.stage.addEventListener(MouseEvent.MOUSE_UP, chartItemExtraEventHandler);
				}
				else
				{
					renderer = null;
				}
				dragEventType = "itemDragStartEvent";
			}
			else if(event.type == MouseEvent.MOUSE_UP)
			{
				dragEventType = "itemDragEndEvent";
				this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, chartItemExtraEventHandler);
				this.stage.removeEventListener(MouseEvent.MOUSE_UP, chartItemExtraEventHandler);
			}
			
			//if we've found an item renderer, dispatch the event
			if(renderer is ISeriesItemRenderer)
			{
				var seriesIndex:int = (this.chart.dataProvider as Array).indexOf(renderer.series);
				var itemIndex:int = renderer.series.dataProvider.indexOf(renderer.data)
				var itemEvent:Object = {type: dragEventType, seriesIndex: seriesIndex, index: itemIndex, item: renderer.data, x: this.mouseX, y: this.mouseY};
				this.dispatchEventToJavaScript(itemEvent);
				this._lastMouseItem = renderer;
			}
		}
		
		protected function setDataTipStyles(styles:Object):void
		{
			var contentPadding:Number = 6;
			if(styles.padding >= 0)
			{
				contentPadding = styles.padding;
			}
			
			if(styles.border || styles.background)
			{
				//defaults
				var backgroundFactory:InstanceFactory = this.createBorderBackgroundFactory();
				backgroundFactory.properties.fillColor = 0xffffff;
				backgroundFactory.properties.fillAlpha = 0.9;
				backgroundFactory.properties.borderWeight = 1;
				backgroundFactory.properties.borderColor = 0x000000;
				var border:Object = styles.border;
				if(border)
				{
					if(border.color != null)
					{
						backgroundFactory.properties.borderColor = this.parseColor(border.color)
					}
					if(border.size != null)
					{
						backgroundFactory.properties.borderWeight = border.size;
						contentPadding += border.size;
					}
				}
				var background:Object = styles.background;
				if(background)
				{
					if(background.color != null)
					{
						backgroundFactory.properties.fillColor = this.parseColor(background.color);
					}
					if(background.image)
					{
						backgroundFactory.properties.image = background.image;
					}
					if(background.alpha != null)
					{
						backgroundFactory.properties.fillAlpha = background.alpha;
					}
					if(background.mode)
					{
						backgroundFactory.properties.imageMode = background.mode;
					}
				}
				this.chart.setStyle("dataTipBackgroundSkin", backgroundFactory);
			}
			
			this.chart.setStyle("dataTipContentPadding", contentPadding);
			
			if(styles.font)
			{
				var textFormat:TextFormat = TextFormatSerializer.readTextFormat(styles.font);
				this.chart.setStyle("dataTipTextFormat", textFormat);
			}
		}
		
		protected function setAxisStyles(styles:Object, axisName:String):void
		{
			if(styles.color != null)
			{
				this.chart.setStyle(axisName + "AxisColor", this.parseColor(styles.color));
			}
			
			if(styles.size != null)
			{
				this.chart.setStyle(axisName + "AxisWeight", styles.size);
			}
			
			if(styles.showLabels != null)
			{
				this.chart.setStyle("show" + axisName.substr(0, 1).toUpperCase() + axisName.substr(1) + "AxisLabels", styles.showLabels);
			}
			
			if(styles.hideOverlappingLabels != null)
			{
				this.chart.setStyle(axisName.substr(0, 1).toUpperCase() + axisName.substr(1) + "AxisHideOverlappingLabels", styles.hideOverlappingLabels);
			}
			
			if(styles.majorGridLines)
			{
				var majorGridLines:Object = styles.majorGridLines;
				if(majorGridLines.color != null)
				{
					this.chart.setStyle(axisName + "AxisGridLineColor", this.parseColor(majorGridLines.color));
				}
				if(majorGridLines.size != null)
				{
					this.chart.setStyle(axisName + "AxisGridLineWeight", majorGridLines.size);
					this.chart.setStyle("show" + axisName.substr(0, 1).toUpperCase() + axisName.substr(1) + "AxisGridLines", majorGridLines.size > 0);
				}
			}
			
			if(styles.minorGridLines)
			{
				var minorGridLines:Object = styles.minorGridLines;
				if(minorGridLines.color != null)
				{
					this.chart.setStyle(axisName + "AxisMinorGridLineColor", this.parseColor(minorGridLines.color));
				}
				if(minorGridLines.size != null)
				{
					this.chart.setStyle(axisName + "AxisMinorGridLineWeight", minorGridLines.size);
					this.chart.setStyle("show" + axisName.substr(0, 1).toUpperCase() + axisName.substr(1) + "AxisMinorGridLines", minorGridLines.size > 0);
				}
			}
			
			if(styles.majorTicks)
			{
				var majorTicks:Object = styles.majorTicks;
				if(majorTicks.color != null)
				{
					this.chart.setStyle(axisName + "AxisTickColor", this.parseColor(majorTicks.color));
				}
				if(majorTicks.size != null)
				{
					this.chart.setStyle(axisName + "AxisTickWeight", majorTicks.size);
				}
				if(majorTicks.length != null)
				{
					this.chart.setStyle(axisName + "AxisTickLength", majorTicks.length);
				}
				if(majorTicks.display)
				{
					this.chart.setStyle("show" + axisName.substr(0, 1).toUpperCase() + axisName.substr(1) + "AxisTicks", majorTicks.display != "none");
					if(majorTicks.display != "none")
					{
						this.chart.setStyle(axisName + "AxisTickPosition", majorTicks.display);
					}
				}
			}
			
			if(styles.minorTicks)
			{
				var minorTicks:Object = styles.minorTicks;
				if(minorTicks.color != null)
				{
					this.chart.setStyle(axisName + "AxisMinorTickColor", this.parseColor(minorTicks.color));
				}
				if(minorTicks.size != null)
				{
					this.chart.setStyle(axisName + "AxisMinorTickWeight", minorTicks.size);
				}
				if(minorTicks.length != null)
				{
					this.chart.setStyle(axisName + "AxisMinorTickLength", minorTicks.length);
				}
				if(minorTicks.display)
				{
					this.chart.setStyle("show" + axisName.substr(0, 1).toUpperCase() + axisName.substr(1) + "AxisMinorTicks", minorTicks.display != "none");
					if(minorTicks.display != "none")
					{
						this.chart.setStyle(axisName + "AxisMinorTickPosition", minorTicks.display);
					}
				}
			}
		}
		
		protected function setLegendStyles(styles:Object):void
		{
			if(styles.font)
			{
				var textFormat:TextFormat = TextFormatSerializer.readTextFormat(styles.font);
				this.legend.setStyle("textFormat", textFormat);
			}
			
			if(styles.spacing != null)
			{
				this.legend.setStyle("gap", styles.spacing);
			}
			
			if(styles.display)
			{
				switch(styles.display)
				{
					case "left":
					case "right":
						this.legend.setStyle("direction", "vertical");
						break;
					default: //top, bottom
						this.legend.setStyle("direction", "horizontal");
				}
				this.legendDisplay = styles.display;
			}
			
			var contentPadding:Number = 6;
			if(styles.padding != null)
			{
				contentPadding = styles.padding;
			}
			
			if(styles.border || styles.background)
			{
				var backgroundFactory:InstanceFactory = this.createBorderBackgroundFactory();
				var border:Object = styles.border;
				if(border)
				{
					if(border.color != null)
					{
						backgroundFactory.properties.borderColor = this.parseColor(border.color)
					}
					if(border.size != null)
					{
						backgroundFactory.properties.borderWeight = border.size;
						contentPadding += border.size;
					}
				}
				var background:Object = styles.background;
				if(background)
				{
					if(background.color != null)
					{
						backgroundFactory.properties.fillColor = this.parseColor(background.color);
					}
					if(background.image)
					{
						backgroundFactory.properties.image = background.image;
					}
					if(background.alpha != null)
					{
						backgroundFactory.properties.fillAlpha = background.alpha;
					}
					if(background.mode)
					{
						backgroundFactory.properties.imageMode = background.mode;
					}
				}
				this.legend.setStyle("backgroundSkin", backgroundFactory);
			}
			
			this.legend.setStyle("contentPadding", contentPadding);
		}
		
	//--------------------------------------
	//  Private Methods
	//--------------------------------------
		
		/**
		 * @private
		 * Creates a pseudo-class to instantiate a BackgroundAndBorder object.
		 */
		private function createBorderBackgroundFactory():InstanceFactory
		{
			var factory:InstanceFactory = new InstanceFactory(BackgroundAndBorder);
			factory.properties =
			{
				fillColor: 0xffffff,
				fillAlpha: 1,
				borderColor: 0x000000,
				borderWeight: 0,
				image: null,
				imageMode: BackgroundImageMode.REPEAT
			};
			factory.methods =
			{
				addEventListener: [ErrorEvent.ERROR, backgroundLoadErrorHandler, false, 0, true]
			};
			return factory;
		}
		
		private function backgroundLoadErrorHandler(event:ErrorEvent):void
		{
			this.log(event.text, LoggerCategory.ERROR);
		}
		
		private function createMarkerSkin(imagePath:String, series:ISeries):InstanceFactory
		{
			//a simple UILoader would be enough, but we want tiling
			var skin:InstanceFactory = this.createBorderBackgroundFactory();
			//turn off the border
			skin.properties.borderWeight = 0;
			//turn off the fill
			skin.properties.fillAlpha = 0;
			skin.properties.image = imagePath;
			skin.properties.imageMode = BackgroundImageMode.REPEAT;
			if(series is LineSeries)
			{
				//make points fit to size and maintain their aspect ratio
				skin.properties.imageMode = BackgroundImageMode.STRETCH_AND_MAINTAIN_ASPECT_RATIO;
			}
			return skin;
		}
		
		private function parseColor(value:Object):uint
		{
			if(!(value is Number))
			{
				var valueAsString:String = value.toString().replace("#", "");
				if(valueAsString.indexOf("0x") != 0)
				{
					valueAsString = "0x" + valueAsString;
				}
				return parseInt(String(valueAsString), 16);
			}
			return uint(value);
		}
	}
}