转自:http://blog.sina.com.cn/s/blog_543e73a80100snss.html
使用fusionChart主要是被其界面吸引了,各类图表都很好看,下载以后文档也很周全,支持的语言也很多种,容易上手。fusionChart工作原理主要是通过后台传xml数据源给报表前台flash flash复杂接收数据并渲染成最终的图表。
至于好不好用,仁者见仁了。我用起来感觉还是很舒服的,暂时还没做比较复杂的图表,目前的功能是够用的。这里主要说说使用中碰到的问题,和我的解决办法
第一 用过的人肯定都有会碰到,就是中文支持,按照默认的输出,肯定最后数据无法渲染。 fusionChart 有两种调用xml数据方法 setDataURL 和setDataXml方法。现就两种方式中文支持方法一一描述一下
1 先说 setDataXml吧,这个好解决,只要输出是response.setCaractEncoding("utf-8")即可,我的系统统一都是utf-8编码,其它我没试。由于配置时已经加过编码过滤器了,所以这部也可省略。这样做的缺点就是输出xml过长可能会有问题。
2 setDataURL方法,我之前上网查过很多网站,说法都是fusionChart free版本的这个有bug,用这个不能支持中文。我试了很多方法也确实都不行,后翻到官方文档中带的例子中输出日语的一个,恍然大悟
Java代码
byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};
String utf8BomStr = new String(utf8Bom,"UTF-8");
byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};String utf8BomStr = new String(utf8Bom,"UTF-8");
这一段是关键,就是需要在你输出的xml字符串之前加上utf-8 bom技术标示,这样前台就可以读出中文了。还有一点需要注意,就是url是带参数的如下
/statistics/chartData.do?name=${searchName}${urlParam}“&”符号fusionChart是不认的,也需要URLEncoder.encoding转换中文的支持就先说到这了,我用的 setDataURL 中文显示现在已经没什么问题了
第二 就是比较头疼的 柱状图中横坐标标题中文不显示的问题,主要因为fusionChart强行旋转了y轴标题的文字,汉字是不支持的 网上的解决办法是加上xml根结点加属性 rotateYAxisName=‘0’ 我试过不起作用
后来才知道是 fusionChart free版本是不支持这个属性,fusionChart v3版本支持这个,我下载过破解的v3版试过,确实好用,但我不喜欢v3的默认风格,所以还是想从free版上解决问题。我的解决办法就是sothink swf decompiler工具把相应的swf破解了,直接改源代码既然是yAxisName出了问题当然就是从这下手,找到yAxisName的相关代码,很快找到生成的那段AS
Js代码
if (this.Params.xAxisName != "")
{
createText(this.getLevel(), this.Params.xAxisName, this.Objects.Canvas.xPos + this.Objects.Canvas.width / 2, this.Objects.Canvas.height + this.Objects.xAxisName.yPos, this.Params.outCnvBaseFont, this.Params.outCnvBaseFontSize, this.Params.outCnvBaseFontColor, true, "center", "center", null, true);
} // end if
if (this.Params.yAxisName != "")
{
createText(this.getLevel(), this.Params.yAxisName, this.Objects.yAxisName.xPos, this.Objects.Canvas.yPos + this.Objects.Canvas.height / 2, "Verdana", Number(this.Params.outCnvBaseFontSize) + 1, this.Params.outCnvBaseFontColor, false, "center", "center", 270, true);
} // end if
if (this.Params.xAxisName != "") { createText(this.getLevel(), this.Params.xAxisName, this.Objects.Canvas.xPos + this.Objects.Canvas.width / 2, this.Objects.Canvas.height + this.Objects.xAxisName.yPos, this.Params.outCnvBaseFont, this.Params.outCnvBaseFontSize, this.Params.outCnvBaseFontColor, true, "center", "center", null, true); } // end if if (this.Params.yAxisName != "") { createText(this.getLevel(), this.Params.yAxisName, this.Objects.yAxisName.xPos, this.Objects.Canvas.yPos + this.Objects.Canvas.height / 2, "Verdana", Number(this.Params.outCnvBaseFontSize) + 1, this.Params.outCnvBaseFontColor, false, "center", "center", 270, true); } // end if
注意看倒数第五 和倒数第二个参数 输出x轴和y轴有什么不同,改成一样就可以了,编译好把flash替换了刷新页面横向输出的y轴坐标已经出来了。还有点不完美的就是第一个字显示了一半被截掉了一样,看着不舒服,解决办法: 输出的xml根节点加上 chartLeftMargin=‘30’属性。ok大功告成
另外一种说法是fusionCharts的Y轴不支持中方竖着显示,改成横向即可,加上如下代码中粗体的参数:
chart.setDataXML("<chart rotateYAxisName='0' baseFont='宋体' baseFontSize='14' palette='10' caption='标题' xAxisName='X轴' yAxisName='Y轴' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='1'><set label='1月' value='462' /><set label='Feb' value='857' /><set label='Mar' value='671' /><set label='Apr' value='494' /><set label='May' value='761' link='javascript:myJS()'/><set label='Jun' value='960' link='n-DemoLinkPages/DemoLink1.html'/></chart>")
分享到:
相关推荐
玩转FusionCharts:Y轴数字形式(如去掉K,加前缀什么的。
功能特性 ... showLimits 是否显示图表限值(y轴最大、最小值),默认为1(True) showColumnShadow 是否显示各条形图间的阴影(若柱面图在一起并列的话) showAlternateHGridColor 是否隔行显示不同颜色
项目中需要FusionCharts图表显示双Y轴,好像FCF_MSLine.swf不可以这样,只能显示一个Y轴,多条线,找了一下,用MSCombiDY2D.swf可以实现,现在晒出来和大家分享一下
fusionCharts的feeddata方法fusionCharts的feeddata方法fusionCharts的feeddata方法
fusionCharts完美破解版:解决中文竖排不显示问题 FusionCharts 完美破解版,不是之前的36个,一共49个 包含FusionCharts使用手记 官方Demo 中文开发指南 解决中文乱码Demo Area2D.swf Bar2D.swf Bubble.swf Column...
FusionCharts 破解版 是中文文档,其中包括了开发需要的flash 和 配置的xml文件。 是很好的例子。 有意者请下载参阅
当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了100个常见问题及解决方法供大家参考,希望对大家有帮助。
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
在fusioncharts中点击柱子中文乱码问题,(i) + "' value='" + list.get(i).getCount() + "' link='[removed]myJss('" + idTest + "','" + idTest1 + "'," + "'" + path + "&category;=...
FusionCharts一个好用的报表工具,方便、高效、快速创建报表。各式报表应有尽有。
自己整理的FusionCharts(支持中文),X轴,Y轴都能显示中文, setDataXml(支持中文)和setDataUrl() 两种方法实现
fusionCharts正式版 You need to enable frames in your browser to see FusionCharts documentation.
FusionCharts
FusionCharts_API_中文帮助文件
FustionCharts总结:包含FusionCharts XT (v3.2.2),test项目,FusionCharts参数说明
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几...此文档为FusionCharts参数详细说明的中文帮助文档。 FusionCharts官网:http://www.fusioncharts.com/
FusionCharts 部分中文文档.doc