FusionCharts中文乱码+去logo资源

本文提供了解决FusionCharts中文显示乱码的方法,包括设置页面编码、添加图形点击事件及生成XML字符串流等步骤。同时,介绍了如何在页面中引入所需JS文件并配置相关参数,确保中文信息正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用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>  

参数的详细说明和功能特性:http://www.meisoft.cn/

无logo下载地址:http://download.youkuaiyun.com/detail/qiaoshuai0920/9175993

转载:http://cjp1989.iteye.com/blog/1843776


FusionCharts是一个强大的数据可视化库,可以帮助开发人员创建漂亮而交互式的图表和图形。下面是一个关于如何使用FusionCharts的详细说明,包括实例、图解和Demo。 1. 安装FusionCharts:首先,你需要从FusionCharts官方网站下载和安装FusionCharts库。你可以选择下载免费版本或购买商业许可证。 2. 引入FusionCharts库:将FusionCharts的JavaScript文件引入你的HTML文件中。你可以通过将以下代码添加到`<head>`标签中来实现: ```html <script src="fusioncharts.js"></script> ``` 3. 创建一个容器:在HTML文件中创建一个用于显示图表的容器。你可以使用一个`<div>`标签,并为其指定一个唯一的ID。例如: ```html <div id="chartContainer"></div> ``` 4. 准备数据:准备用于绘制图表的数据。你可以使用JavaScript对象或从服务器获取的JSON数据。 5. 创建图表对象:使用FusionCharts提供的API创建一个图表对象。你需要指定图表类型、数据和容器ID。例如,下面的代码创建了一个柱状图: ```javascript var chart = new FusionCharts({ type: 'column2d', renderAt: 'chartContainer', dataSource: { data: [ { label: 'January', value: '100' }, { label: 'February', value: '200' }, { label: 'March', value: '150' } ] } }); ``` 6. 渲染图表:调用图表对象的`render()`方法,将图表渲染到指定的容器中。例如: ```javascript chart.render(); ``` 7. 自定义图表:你可以使用FusionCharts提供的各种配置选项来自定义图表的外观和行为。例如,你可以更改图表的颜色、字体、标题等。你可以参考FusionCharts的文档以获取更多自定义选项。 8. 实例和图解:根据你的具体需求,可以参考FusionCharts的官方文档和示例来学习更多关于使用FusionCharts的实例和图解。 9. Demo:你可以在FusionCharts的官方网站上找到各种示例和演示,以帮助你更好地理解和使用FusionCharts。你可以尝试运行这些Demo,并从中获取灵感和指导。 希望这个详细说明对你有所帮助!如果你还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值