Flex - 线图LineChart在只有一条数据时显示一个点

2014-11-25 发布：hangge 阅读：868

使用Flex的LineChart可以很方便的展现一个线图，但当数据只有一条的时候，图上会什么都不显示。

如果想在只有一条数据时，图上也显示一个点，可进行下面两步操作：

1，将LineSeries的itemRenderer设置成mx.charts.renderers.CircleItemRenderer。（这样默认点就出来了）

2，如果只有一条数据，将数据源前后各插一条空数据。（这样点会在横坐标居中，同时鼠标一上去也会有提示）

代码如下：

<?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.events.FlexEvent;
			
			private var myData:XML = <data>
					<item month="三月" value="60"/>
				</data>
			
			protected function init(event:FlexEvent):void
			{
				line1.setStyle("fill", 0xffffff); //原点内部填充色为白色
				line1.setStyle("radius", 4); //整个圆点的半径为4
				
				//只有一个点的时候，前后插入空数据，使点能够绘制并位于横轴中级
				if(myData.item.length() == 1){
					myData.prependChild(<item month=""/>);
					myData.appendChild(<item month=""/>);
				}
				linechart.dataProvider = myData.item;
			}
			
		]]>
	</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">
		<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>

效果图如下：