Flex - 线图LineChart在只有一条数据时显示一个点
使用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>效果图如下:
