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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章