FusionCharts Line 图形不支持小数点显示问题排查

最近在项目中使用Flex 版的FusionCharts来实现折线图,在折线图中需要以%比例的形式将数据进行折线显示,在数据中包含小数点的数据,具体图例如下所示:

在实际工作过程中,如果数据部分不包括小数部分(全是整数),折线图能够很顺利地生成,但是如果其中包含小数点形式的数据,则始终报Error in loading data错误,经过多次尝试始终无法解决问题,以下是整个示例中的具体测试代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" xmlns:components="com.fusioncharts.components.*" creationComplete="application1_creationCompleteHandler(event)">
<mx:Script>
<![CDATA[
import com.fusioncharts.components.FusionCharts;
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var custXML1:String="<chart bgColor='406181,6DA5DB' bgAlpha='100' baseFontColor='FFFFFF'  canvasBgAlpha='0' canvasBorderColor='FFFFFF' divLineColor='FFFFFF' divLineAlpha='100' numVDivlines='10' vDivLineisDashed='1' showAlternateVGridColor='1' lineColor='BBDA00' anchorRadius='4' anchorBgColor='BBDA00' anchorBorderColor='FFFFFF' anchorBorderThickness='2' showValues='0' numberSuffix='%' toolTipBgColor='406181' toolTipBorderColor='406181' alternateHGridAlpha=‘5’><set label='1999' value='0' /><set label='2000' value='0' /><set label='2001' value='29.32' /><set label='2002' value='33.05' /><set label='2003' value='26.82' /><set label='2004' value='25.35' /><set label='2005' value='30.79' /><set label='2006' value='29.42' /><set label='2007' value='16.98' /><set label='2008' value='15.81' /><set label='2009' value='11.84' /><set label='2010' value='9.54' /><set label='2011' value='12.79' /><styles><definition><style name='LineShadow' type='shadow' color='333333' distance='6'/></definition><application></application></styles></chart>";
var custChat1:FusionCharts=new FusionCharts();
custChat1.FCChartType="Line";
custChat1.FCDataXML=custXML1;
custChat1.width=chat2Box.width*99/100;
custChat1.height=chat2Box.height*99/100;
chat2Box.addChild(custChat1);
}
]]>
</mx:Script>
<mx:HBox id="chat2Box" width="100%" height="40%">
</mx:HBox>
</mx:Application>

运行上述代码始终显示:Error in loading data错误 ,于是开始排查之旅,通过将xml数据存储到data/test.xml文件中,再采用FCDataURL形式来加载能够解决问题,具体代码

<components:FusionCharts id="chart" width="100%" height="100%" FCChartType="Line" FCDataURL="data/test.xml"></components:FusionCharts>

但是在实际项目中再将代码改造去读取远程的URL,显然工作量较大,于是开始继续查错之旅,采用步骤如下:

1.分析问题,很有可能是由于组件对于小数点支持的问题引起,于是重点查找组件是否支持对小数点进行格式化

2.通过给chart节点加入decimals='2' (保留两 位小数,四舍五入)foceDecimals='2'(强制保 留两位小数,对于5.1 转换为5.10)属性,依然无法解决问题

3.经过多次试验,基本可以确定是由于chart节点中属性的问题引起错误发生,故重点对chart的节点进行逐步排查,采用排除法进行分法

4.当去年chart节点alternateHGridAlpha='5'属性后,错误解除,图形顺利生成。

PS:alternateHGridAlpha 属性代表横向网格带的透明度,取值范围在[0-100]之间。由于无法深入分析FusionCharts组件源代码,故无法了解错误发生原因,有待后续工作中继续深入了解分析。



发布了18 篇原创文章 · 获赞 7 · 访问量 10万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章