当前位置: 代码迷 >> Web前端 >> FusionCharts中文乱码有关问题
  详细解决方案

FusionCharts中文乱码有关问题

热度:89   发布时间:2012-10-29 10:03:53.0
FusionCharts中文乱码问题
从 http://www.infosoftglobal.com/ 站点下载免费版本到本地,解压到本地,取出 JSClass目录和Charts 目录下所有文件拷贝到你的网站chart目录下,即可开始FusionCharts的使用之旅。

一、           开始一个简单的demo

       1. 在你的网站根目录下新建 Data.xml文档,作为图表的数据源,内容如下:

<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
   <set name='Jan' value='462' color='AFD8F8' />
   <set name='Feb' value='857' color='F6BD0F' />
   <set name='Mar' value='671' color='8BBA00' />
   <set name='Apr' value='494' color='FF8E46' />
   <set name='May' value='761' color='008E8E' />
   <set name='Jun' value='960' color='D64646' />
   <set name='Jul' value='629' color='8E468E' />
   <set name='Aug' value='622' color='588526' />
   <set name='Sep' value='376' color='B3AA00' />
   <set name='Oct' value='494' color='008ED6' />
   <set name='Nov' value='761' color='9D080D' />
   <set name='Dec' value='960' color='A186BE' />
</graph>

       2. 再建立一个展示页面,Demo.html :

              <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>第一个Flash图表页面</title>

<!-- 引入FusionCharts 需要的JS脚本文件 -->

<script language="JavaScript" src="chart/FusionCharts.js"></script>

</head>

<body>

<div id="chartDiv" align="center">First Chart Container Pie 3D</div>

  <script type="text/javascript">

     var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");

     myChart1.setDataURL("Data.xml");     

     myChart1.render("chartDiv");

  </script>

</body>

</html>



3. 猛击 Demo.html 文件,即可看到如下效果:







       4. 够简单吧,这样才好。

二、           对中文字符的支持

1. 让 FusionCharts支持中文
       修改一下刚才 Data.xml 文件,加入几个中文字符,狂刷新浏览器,会看到几个不协调的字符。这里我修改图表标题(caption='Monthly Unit Sales' è caption='月销售历史'):

      





       FusionCharts告诉我们XML文件加载失败,可能有非法字符。下面要修改Data.xml,使之好好工作。官方说当前Data.xml文件缺乏BOM标记(Byte Order Mark),打开UltraEdit 文本编辑器,另存为的时候,一定要选择:





UTF-8编码方式(已经附加BOM标记),直接覆盖原文件。

再次刷新Demo.html 页面,即可看到标题变成了中文:





       若您对16进制熟悉,以16进制打开文件,直接修改前6位字符为

”EF BB BF”,保存成UTF-8格式即可。

       牢记:静态的XML文件,须包含BOM特征码。

2. 让动态产生的XML文件避免中文问题

我们实验一下把Data.xml文件替换成动态生成XML方式。

新建一个JSP 页面:Data.jsp ,输入以下内容:

       <%@ page language="java" contentType="text/xml; charset=UTF-8"%>

<%

    String xmlStr = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>"

           + "<set name='Jan' value='462' color='AFD8F8' />"

           + "<set name='Feb' value='857' color='F6BD0F' />"

           + "<set name='Mar' value='671' color='8BBA00' />"

           + "<set name='Apr' value='494' color='FF8E46' />"

           + "<set name='May' value='761' color='008E8E' />"

           + "<set name='Jun' value='960' color='D64646' />"

           + "<set name='Jul' value='629' color='8E468E' />"

           + "<set name='Aug' value='622' color='588526' />"

           + "<set name='Sep' value='376' color='B3AA00' />"

           + "<set name='Oct' value='494' color='008ED6' />"

           + "<set name='Nov' value='761' color='9D080D' />"

           + "<set name='Dec' value='960' color='A186BE' />"

           + "</graph>";

    out.write(xmlStr);

%>

在Demo.html页面,修改 setDataURL参数为“Data.jsp”,再次刷新Demo.html页面,即可看到效果。

下面在JSP页面中同样把图表标题修改成中文,刷新浏览器,会看到“Invalid XML Data”字样。

怎么办,设置JSP文件具有BOM标记,不行!设置其XML输出编码尝试一下吧:

<%@ page language="java" contentType="text/xml; charset=GBK"%>

    看到了吗,UTF-8 被修改成了 GBK编码,刷新Demo.html文件,看一看到正常效果了。

    牢记 :动态产生的XML文档,编码须是GBK或者gb2312。

三、 表格数据源-字符串形式加载

    以上使用FusionCharts 提供的 setDataURL方法,参数须是可访问、产生xml文档的URL地址。若不是url,字符串亦可作为参数传递过去:

    新建Demo2.html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>使用字符串充当数据源</title>

<script language="JavaScript" src="chart/FusionCharts.js"></script>

</head>

<body>

<div id="chartDiv" align="center"> Chart Container Pie 3D</div>

    <script type="text/javascript">

      //数据源

      var xmlData = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>" +

      "<set name='Jan' value='462' color='AFD8F8' />" +

      "<set name='Feb' value='857' color='F6BD0F' />" +

      "<set name='Mar' value='671' color='8BBA00' />" +

      "<set name='Apr' value='494' color='FF8E46' />" +

      "<set name='May' value='761' color='008E8E' />" +

      "<set name='Jun' value='960' color='D64646' />" +

      "<set name='Jul' value='629' color='8E468E' />" +

      "<set name='Aug' value='622' color='588526' />" +

      "<set name='Sep' value='376' color='B3AA00' />" +

      "<set name='Oct' value='494' color='008ED6' />" +

      "<set name='Nov' value='761' color='9D080D' />" +

      "<set name='Dec' value='960' color='A186BE' />" +

   "</graph>";

       var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");

       myChart1.setDataXML(xmlData);     

       myChart1.render("chartDiv");

    </script>

</body>

</html>

访问Demo2.html页面,会看到正常的图标显示。

尝试一下将图表标题修改成中文,这次很顺利的显示出来了,但标题显示为乱码:


 

    怎么办 ?把当前的html文件修改成包含有BOM特征码的UTF-8文件,这招不好使了。

解决方法,建立一个JSP页面(Demo2.jsp),比Demo2.html文件多了一行内容:

    <%@ page language="java" contentType="text/html; charset=UTF-8"%>

访问一下,可以看到中午乱码问题解决了。

    牢记 :提供字符串数据源的页面必须硬编码才行,可以是GBK或UTF-8。

    再深入一下,动态产生的字符串数据源,是否也存在乱码问题。

    修改Demo2.jsp中的

       myChart1.setDataXML("<jsp:include page= 'Data2.jsp' />");</sp>