Flex4 - 用CircleItemRenderer给线图上加数据点，并设置点颜色和大小

2014-11-21 发布：hangge 阅读：385

Flex的线图组件LineChart里，如果把LineSeries的itemRenderer设置成CircleItemRenderer，即可在线上面显示数据点，代码如下：

<mx:series>
	<mx:LineSeries yField="value" form="segment" displayName="数量" 
				   itemRenderer="mx.charts.renderers.CircleItemRenderer"
				   lineStroke="{lineS1}"/>
</mx:series>

效果图如下：

但是这个点的样式也太丑了，外面一圈还是黄色的，想改个点的颜色还没辙。后来在网上查了好久，才发现解决办法。

解决办法：对于LineSeries，我们可以除了通过lineStroke来设置线条样式，还可以通过stroke来设置数据点的外圈颜色和粗细（即上图那个黄色的部分）。

而且页面初始化的时候，可以通过setStyle的方式给LineSeries设置radius（点的半径），fill（内部填充色）。

代码如下：

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="init(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			[Bindable]
			private var myData:ArrayCollection = new ArrayCollection( [
				{ month: "一月", value: 20},
				{ month: "二月", value: 60},
				{ month: "三月", value: 215},
				{ month: "四月", value: 202},
				{ month: "五月", value: 190},
				{ month: "六月", value: 95}]);
			
			protected function init(event:FlexEvent):void
			{
				line1.setStyle("fill", 0xffffff); //原点内部填充色为白色
				line1.setStyle("radius", 4); //整个圆点的半径为4
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 轴线样式 -->
		<mx:SolidColorStroke id = "axisS1" color="0xBBCCDD" weight="1"/>
		<!-- 线条样式 -->
		<mx:SolidColorStroke id = "lineS1" color="0x00fff5" weight="2"/>
		<!-- 线条点样式 （外圈颜色同线条颜色，外圈线条粗细为1) -->
		<mx:SolidColorStroke id = "pointS1" color="0x00fff5" weight="1"/>
	</fx:Declarations>
		
	<mx:LineChart id="linechart" height="60%" width="60%"
				  verticalCenter="0" horizontalCenter="0"
				  showDataTips="true" dataProvider="{myData}">
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="month"/>
		</mx:horizontalAxis>
		<mx:verticalAxis>
			<mx:LinearAxis id="vAxis"/>
		</mx:verticalAxis>
		<mx:verticalAxisRenderers>
			<mx:AxisRenderer axis="{vAxis}" tickPlacement="none" minorTickPlacement="none"
							 axisStroke="{axisS1}"/>
		</mx:verticalAxisRenderers> 
		<mx:series>
			<mx:LineSeries id="line1" yField="value" form="segment" displayName="数量" 
						   itemRenderer="mx.charts.renderers.CircleItemRenderer"
						   stroke="{pointS1}"
						   lineStroke="{lineS1}"/>
		</mx:series>
	</mx:LineChart>
</s:Application>

效果图如下：