Flex - 线图LineChart在只有一条数据时显示一个点
作者:hangge | 2014-11-25 10:21
使用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>
效果图如下:

全部评论(0)