当前位置: 代码迷 >> Web前端 >> fusioncharts Y轴不显示中文的解决办法
  详细解决方案

fusioncharts Y轴不显示中文的解决办法

热度:812   发布时间:2012-08-25 10:06:20.0
fusioncharts Y轴不显示中文的解决方法

fusionChart工作原理主要是通过后台传xml数据源给报表前台flash,flash接收数据并渲染成最终的图表。

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

? ? ?1 先说 setDataXml,只要输出是response.setCaractEncoding("utf-8")即可。由于配置时已经加过编码过滤器了,所以这步也可省略。这样做的缺点就是输出xml过长可能会有问题。

? ? ?2 setDataURL方法,需要在你输出的xml字符串之前加上utf-8 bom技术标示,这样前台就可以读出中文了。如下:

byte[] utf8Bom = ?new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf}; ??

String utf8BomStr = new String(utf8Bom,"UTF-8");?

就是还有一点需要注意,就是url是带参数的如下 /statistics/chartData.do?name=${searchName}${urlParam}“&”符号fusionChart是不认的,也需要URLEncoder.encoding转换为中文支持

? ?第二 就是比较头疼的 柱状图中横坐标 标题中文不显示的问题,主要因为fusionChart强行旋转了y轴标题的文字,汉字是不支持的 网上的解决办法是加上xml根结点加属性 rotateYAxisName=‘0’ 但是 ?fusionChart free版本是不支持这个属性,fusionChart ?v3版本支持这个

free版上解决 rotateYAxisName不支持问题:

用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大功告成

  相关解决方案