最近在项目中使用Flex 版的FusionCharts来实现折线图,在折线图中需要以%比例的形式将数据进行折线显示,在数据中包含小数点的数据,具体图例如下所示:
在实际工作过程中,如果数据部分不包括小数部分(全是整数),折线图能够很顺利地生成,但是如果其中包含小数点形式的数据,则始终报Error in loadingdata错误,经过多次尝试始終无法解决问题,以下是整个示例中的具体测试代码如下所示:
<?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组件源代码,故无法了解错误发生原因,有待后续工作中继续深入了解分析。
分享到:
相关推荐
FusionCharts常用图形属性
FusionCharts各种图形报表资源下载
FusionCharts的图形属性大全功能特性 animation 是否动画显示数据,默认为1(True) showNames 是否显示横向坐标轴(x轴)标签名称 rotateNames 是否旋转显示标签,默认为0(False):横向显示
使用FusionCharts做图形分析的例子,有详细的说明
网上很多的FusionCHarts导出图形代码几乎都不全面,而且很多do无法用,特意整理了一下,非常详细、全面阐述了如何导出到图形。
本资源 是较为轻量级的 JAVA WEB 图形解决方案 实例,采用JS和FLASH技术,下载即可运行。相对于jfreeChart 更为简洁方便好用,高效。
免费漂亮的Flash图形报表-FusionCharts Free V2.1
FusionCharts3.2.2完整例子支持下载~另存为本地 支持JDK1.5
NULL 博文链接:https://huanglz19871030.iteye.com/blog/704194
FusionCharts图形控件在JSP下生成各种图表
FusionCharts 可以实现2D 和 3D 图形显示
FusionCharts 统计图形显示,有3D ,2D的各种图形 包括仪表图,柱状图,饼形图,折线图,峰谷图等,非常齐全
fusionCharts完美破解版:解决中文竖排不显示问题 FusionCharts 完美破解版,不是之前的36个,一共49个 包含FusionCharts使用手记 官方Demo 中文开发指南 解决中文乱码Demo Area2D.swf Bar2D.swf Bubble.swf Column...
图形工具fusioncharts
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
FusionCharts一个好用的报表工具,方便、高效、快速创建报表。各式报表应有尽有。
FusionCharts的Javascript和SWF文件,本资源收集了Fusioncharts做报表统计需要的swf文件和Javascript文件
该版本为正式版,最近做了一个项目要引入fusioncharts,所以弄来了这个正式版,绝对没有问题,大家可以放心下载使用
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。 FusionCharts free 是一个跨平台,跨浏览器的flash...
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。 FusionCharts free 是一个跨平台,跨浏览器的flash...