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

<script type="text/javascript"> /*iteye博客内页Banner-468*60,创建于2016-5-31*/ var cpro_id = "u1405021"; </script> <script type="text/javascript" src="http://cpro.baidustatic.com/cpro/ui/c.js"></script>
分享到:
参考知识库
语音识别与合成知识库 228  关注 | 222  收录
计算机视觉知识库 623  关注 | 191  收录
自然语言理解和处理知识库 230  关注 | 87  收录
知识工程知识库 68  关注 | 58  收录
评论
<script type="text/javascript"> dp.SyntaxHighlighter.HighlightAll('code', true, true); $$('#main .blog_content pre[name=code]').each(function(pre, index){ // blog content var post_id = 1259048; var location = window.location; source_url = location.protocol + "//" + location.host + location.pathname + location.search; pre.writeAttribute('codeable_id', post_id); pre.writeAttribute('codeable_type', "Blog"); pre.writeAttribute('source_url', source_url); pre.writeAttribute('pre_index', index); pre.writeAttribute('title', 'fusioncharts Y轴不显示中文的解决方法'); }); fix_image_size($$('div.blog_content img'), 700); function processComment() { $$('#main .blog_comment > div').each(function(comment){// comment var post_id = comment.id.substr(2); $$("#"+comment.id+" pre[name=code]").each(function(pre, index){ var location = window.location; source_url = location.protocol + "//" + location.host + location.pathname + location.search; source_url += "#" + comment.id; pre.writeAttribute('codeable_id', post_id); pre.writeAttribute('codeable_type', "BlogComment"); pre.writeAttribute('source_url', source_url); pre.writeAttribute('pre_index', index); pre.writeAttribute('title', 'fusioncharts Y轴不显示中文的解决方法'); }); }); } function quote_comment(id) { new Ajax.Request('/editor/quote', { parameters: {'id':id, 'type':'BlogComment'}, onSuccess:function(response){editor.bbcode_editor.textarea.insertAfterSelection(response.responseText); Element.scrollTo(editor.bbcode_editor.textarea.element);} }); } code_favorites_init(); processComment(); new WeiboShare({share_buttons: $('share_weibo'), img_scope: $('blog_content')}); </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
xml <!-- [xml] (xml / csv) 数据类型xml/csv--> ; <!-- 如果使用csv作为数据的话,需要使用这个属性;表示文件数据分隔符,(平常以";"和","为主) [;] (string) csv file data separator (you need it only if you are using csv file for your data) --> 1 <!-- 如果使用的是csv数据,可以设置跳过几行再显示数据,默认为0表示csv中的数据全部显示,大于n(n>0);表示前面n行都不显示[0] (Number) if you are using csv data type, you can set the number of rows which should be skipped here --> <!-- 设置系统中的字体[Arial] (font name) use device fonts, such as Arial, Times New Roman, Tahoma, Verdana... --> <!-- 设置所有文本的大小,默认为11,具体的文本的字体大小也可以在下面的设置中设置[11] (Number) text size of all texts. Every text size can be set individually in the settings below --> <!-- 同上[#000000] (hex color code) main text color. Every text color can be set individually in the settings below--> . <!-- 小数分隔符,默认为[,]注:该属性只是用来显示,而在csv数据文件中,必须使用[.] (string) decimal separator. Note, that this is for displaying data only. Decimals in data xml file must be separated with a dot --> <!-- 千位分隔符,默认为空[ ] (string) thousand separator. use "none" if you don't want to separate --> 3 <!-- 如果百分数格式的数字,后面的小数位小于该属性的值,则在小数后面加0补充。如54.2%,该属性设置为3,那么显示的效果为54.200%。[] (Number) if your value has less digits after decimal then is set here, zeroes will be added --> <!--设置科学记数法的最小值 [0.000001] If absolute value of your number is equal or less then scientific_min, this number will be form

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值