fusionChart 使用手记

最近看了些开源的统计图表组件，主要看了fusionChart 和JfreeChart jfreeChart还没有深入了解，暂不做评论。

使用fusionChart主要是被其界面吸引了，各类图表都很好看，下载以后文档也很周全，支持的语言也很多种 ，容易上手。fusionChart工作原理主要是通过后台传xml数据源给报表前台flash flash复杂接收数据并渲染成最终的图表。

至于好不好用，仁者见仁了。我用起来感觉还是很舒服的，暂时还没做比较复杂的图表，目前的功能是够用的。这里主要说说使用中碰到的问题，和我的解决办法

[b]第一 用过的人肯定都有会碰到，就是中文支持[/b]，按照默认的输出，肯定最后数据无法渲染。 fusionChart 有两种调用xml数据方法 setDataURL 和setDataXml方法。现就两种方式中文支持方法一一描述一下

1 先说[b] setDataXml[/b]吧，这个好解决，只要输出是response.setCaractEncoding("utf-8")即可，我的系统统一都是utf-8编码，其它我没试。由于配置时已经加过编码过滤器了，所以这部也可省略。这样做的缺点就是输出xml过长可能会有问题。

2 [b]setDataURL[/b]方法，我之前上网查过很多网站，说法都是fusionChart free版本的这个有bug，用这个不能支持中文。我试了很多方法也确实都不行，后翻到官方文档中带的例子中输出日语的一个，恍然大悟

byte[] utf8Bom =  new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};
String utf8BomStr = new String(utf8Bom,"UTF-8");

[color=red]这一段是关键，就是需要在你输出的xml字符串之前加上utf-8 bom技术标示，这样前台就可以读出中文了[/color]。还有一点需要注意，就是url是带参数的如下
[color=darkblue]/statistics/chartData.do?name=${searchName}${urlParam}[/color]“&”符号fusionChart是不认的，也需要[color=darkblue]URLEncoder.encoding[/color]转换中文的支持就先说到这了，我用的 setDataURL 中文显示现在已经没什么问题了


[b]第二 就是比较头疼的 柱状图中横坐标 标题中文不显示的问题[/b]，主要因为fusionChart强行旋转了y轴标题的文字，汉字是不支持的 网上的解决办法是加上xml根结点加属性 rotateYAxisName=‘0’ 我试过不起作用

后来才知道是 [color=red]fusionChart free版本是不支持这个属性[/color]，fusionChart v3版本支持这个，我下载过破解的v3版试过，确实好用，但我不喜欢v3的默认风格，所以还是想从free版上解决问题。我的解决办法就是[color=blue]sothink swf decompiler[/color]工具把相应的swf破解了，直接改源代码 既然是yAxisName出了问题当然就是从这下手，找到yAxisName的相关代码，很快找到生成的那段AS

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

[color=red]注意看倒数第五 和倒数第二个参数 输出x轴和y轴有什么不同，改成一样就可以了[/color]，编译好把flash替换了刷新页面 横向输出的y轴坐标已经出来了。还有点不完美的就是第一个字显示了一半被截掉了一样，看着不舒服，解决办法: 输出的xml根节点加上 chartLeftMargin=‘30’属性。ok大功告成

破解过fusionChart的free版才知道，这个版是用的as1.0写的，还好不难改，估计和历史原因有关吧，看了v3版的代码用的高版本 要规范很多了，很多as独立成文件，文件夹也组织有序些。