最近看了些开源的统计图表组件,主要看了fusionChart 和JfreeChart jfreeChart还没有深入了解,暂不做评论。
使用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大功告成
破解过fusionChart的free版才知道,这个版是用的as1.0写的,还好不难改,估计和历史原因有关吧,看了v3版的代码用的高版本 要规范很多了,很多as独立成文件,文件夹也组织有序些。
分享到:
相关推荐
从 http://www.infosoftglobal.com/ 站点下载免费版本到本地,解压到本地,取出 JSClass目录和Charts 目录下所有文件拷贝到你的网站chart目录下,即可开始FusionCharts的使用之旅。
包含FusionCharts使用手记 官方Demo 中文开发指南 解决中文乱码Demo Area2D.swf Bar2D.swf Bubble.swf Column2D.swf Column3D.swf Doughnut2d.swf Doughnut3D.swf FCExporter.swf Funnel.swf InverseMSArea.swf ...
FusionCharts使用源码例子,结合FusionCharts使用
fusioncharts使用范例
FusionCharts V3使用文档.pdf
用fusioncharts使用json格式数据展示图表
这个文档写了FusionCharts如何使用
FusionCharts图表组件简单使用
FusionCharts使用及参数说明,很好的图表工具,使用简单方便
FusionCharts使用之保存图片 说明文档
fusionCharts使用文档
FusionCharts 帮助文档 FusionCharts 学习 FusionCharts 使用笔记
FusionCharts详解使用
3. 使用前的准备工作(基于java的Web工程为例): 1 4. 创建第一个Chart: 1 5. FusionCharts提供多样式图: 3 6. FusionCharts的高级特性: 7 7. FusionCharts提供了很多设置chart样式的属性: 10 8. 动态XML生成的...
FusionCharts是一款非常优秀的数据报表组件,外观上远远胜于JFreeChart
FusionCharts一个好用的报表工具,方便、高效、快速创建报表。各式报表应有尽有。
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
FusionCharts图表控件中文版使用手册。构成fusionCharts的三要素:swf、data.xml、承载图表的载体