在使用FusionCharts过程中,需要显示中文汉字,经常会遇到乱码情况,1.横纵坐标的乱码,2.点击图形传值乱码。下面贴出解决方案。
1.设置页面编码:UTF-8 可以防止横纵坐标中文汉字乱码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> ... </html>
2.添加图形的点击事件:设置 <graph unescapeLinks="0"> 解决链接中传中文乱码
xml: link="JavaScript:showName('Java开发者')" js: function showName(name){ alert(name); //会出现乱码 }
3.使用参考:1.生成xml格式文本流,可以采用拼接,也可以采用dom4j生成
String msg = ""; msg="<?xml version=1.0 encoding=GBK?>"; msg+="<graph caption='人物年龄列表' xAxisName='人名' yAxisName='年龄' " +"showNames='1' decimalPrecision='0' formatNumberScale='0' baseFont='宋体' baseFontSize='14' unescapeLinks='0'>"; msg+="<set name='小明' value='21' color='"+getRandomColor()+"' link='JavaScript:showName('小明')' />"; msg+="<set name='小强' value='25' color='"+getRandomColor()+"' link='JavaScript:showName('小强')' />"; msg+="<set name='大力丸' value='47' color='"+getRandomColor()+"' link='JavaScript:showName('大力丸')' />"; msg+="<set name='主义者' value='85' color='"+getRandomColor()+"' link='JavaScript:showName('主义者')'/>"; msg+="<set name='追梦' value='37' color='"+getRandomColor()+"' link='JavaScript:showName('追梦')' />"; msg+="</graph>";
建议采用dom4j组件生成xml文件
public String getXMLString(List list){ String xmlstr=""; Document document = DocumentHelper.createDocument(); Element graph = document.addElement("graph"); graph.addAttribute("caption", "人物年龄列表"); graph.addAttribute("xAxisName", "人名"); graph.addAttribute("yAxisName", "年龄"); graph.addAttribute("showNames", "1"); graph.addAttribute("desimalPrecision", "0"); graph.addAttribute("formatNumberScale", "0"); graph.addAttribute("baseFont", "宋体"); graph.addAttribute("baseFontSize", "14"); graph.addAttribute("unescapeLinks", "0"); for(int i=0;i<list.size();i++){ Element set = graph.addElement("set"); Person p = list.get(i); set.addAttribute("name", p.getname()); set.addAttribute("value", p.getage()); set.addAttribute("color", getRandomColor()); set.addAttribute("link", "JavaScript:showName('"+p.getname()+"')"); } xmlstr = generateXML(document); return xmlstr; } /** * 通过dom生成xml文件 */ public String generateXML(Document document) { String xmlDoc = ""; StringWriter sw = new StringWriter(); XMLWriter writer; OutputFormat format = OutputFormat.createPrettyPrint(); format.setEncoding("GBK"); writer = new XMLWriter(sw, format); try { writer.write(document); xmlDoc = sw.toString(); URLEncoder.encode(xmlDoc, "utf-8"); } catch (IOException e) { System.out.println("生成XML字符串发生异常"); e.printStackTrace(); } finally { try { writer.close(); sw.close(); } catch (IOException e) { System.out.println("关闭XML读写发生异常"); e.printStackTrace(); } } return xmlDoc; } /** * 随即获得颜色代码 */ public String getRandomColor(){ //颜色代码位数6 int colorLength=6; //颜色代码组数 char[] codeSequence={'A','B','C','D','E','F', '0','1','2','3','4','5','6','7','8','9'}; StringBuffer str=new StringBuffer(); Random random=new Random(); for(int i=0;i<colorLength;i++){ str.append(codeSequence[random.nextInt(16)]); } return str.toString(); }
4.页面显示
<script src="<s:url value="js/FusionCharts.js"/>" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="UTF-8"> $(document).ready(function(){ $.ajax({ type:'post', url:'doPersonCharts.action', data:'', success:function(msg){ //最后的1.表示link可以显示,鼠标有手势 var chart=new FusionCharts("FusionCharts/Column3D.swf","chartId1","900","480","0","1"); chart.setDataXML(msg); chart.render(personForm); }, error:function(){ alert("加载失败,请重新加载..."); } }); }); function showName(name){ alert(name); } </script> <div align="center"> <table width="60%" border="0" name="personForm" id="personForm"></table> </div>