FusionCharts 容易应用

2012-10-08

FusionCharts 简单应用从?http://www.infosoftglobal.com/?站点下载免费版本到本地，解压到本地，取出?JSCla

FusionCharts 简单应用

从?http://www.infosoftglobal.com/?站点下载免费版本到本地，解压到本地，取出?JSClass目录和Charts?目录下所有文件拷贝到你的网站chart目录下，即可开始FusionCharts的使用之旅。

一、???????????开始一个简单的demo

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

???????2.?再建立一个展示页面，Demo.html?：

??????????????<html>

<head>

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

</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?文件，即可看到如下效果：

FusionCharts 容易应用
?

???????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>

热点排行

编程

FusionCharts 容易应用