图表创建以及修改dataTip

最新推荐文章于 2022-11-10 17:16:23 发布

小蕾

最新推荐文章于 2022-11-10 17:16:23 发布

阅读量423

点赞数

CC 4.0 BY-SA版权

分类专栏： FLEX4 文章标签： server library string encoding function import

本文链接：https://blog.csdn.net/zoeyzz/article/details/6414198

FLEX4 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Flex和ActionScript构建的服务器在线玩家分布柱状图。该图表通过ArrayCollection数据源展示不同服务器的人数分布，并利用自定义DataTipSkin提供详细的数据提示。文章还涉及了图表样式设置及图例的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[Bindable]

			private var serverAC:ArrayCollection = new ArrayCollection( [
				{ server: "福建一区", num: 35},{ server: "福建二区", num: 75},{ server: "福建三区", num: 10},
				{ server: "广东一区", num: 32},{ server: "上海五区", num: 27}]);
<!--样式XML 写在<fx:Declarations>标签中-->
       <fx:Declarations>
		<!--填充内容 -->
		<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
		
		<!--边框-->
		<mx:SolidColorStroke id="s1" color="yellow" weight="2"/>
		
	</fx:Declarations>

<!--柱状图-->
	<s:Label x="30" y="10" text="服务器在线分布图"/>
	<mx:ColumnChart
		x="30"
		y="40"
		id="serverOnline"
		paddingLeft="5"
		paddingRight="5"
		showDataTips="true"
		dataProvider="{serverAC}"
		color="#000000" height="350" width="550">
		
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="server"/>
		</mx:horizontalAxis>
		
		<mx:series>
			<mx:ColumnSeries 
				xField="server" 
				yField="num" 
				displayName="人数"
				fill="{sc1}" dataTipRenderer="skins.DataTipSkin"
				stroke="{s1}"
				/>		
		</mx:series> 
		
		
	</mx:ColumnChart>
	<mx:Legend dataProvider="{serverOnline}" x="600" y="40"/>

DataTipSkin.mxml是这样

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true">
	
	<!--s:Label text="{data}"/-->
	
	
	
	<fx:Script>
		<![CDATA[
			import mx.charts.HitData;
			import mx.charts.series.items.LineSeriesItem;
			private function tipString(data:HitData):String{
				var item:Object=data.chartItem;
				return String(item.xValue)+"/n"+String(item.yValue);
			}

		]>
	</fx:Script>
	
	
	
	<mx:VBox backgroundColor="#D0D0D0" backgroundAlpha=".6" borderColor="0xcccccc">
		<mx:Label text="{tipString(data as HitData)}" width="100%" textAlign="center" fontWeight="bold" fontSize="13" />
	</mx:VBox>
	
</s:ItemRenderer>

注释：
如果是针对不同的图表做TIP，那么item可以等于data.charItem.item
item.server（server可以是你定义的标签的STR）