FCF中文指南-第三章--FusionCharts Free我的第一个图形
2012-01-09 16:08
666 查看
在介绍完了FCF的下载安装以后,现在,我们终于要开始创建我们的第一个图表了。我们将要创建一个简单的3D柱状图形,用它来展示每月销售情况摘要。
要使用FCF来创建图形,你需要做下面三件事情:1.选择好你要创建的图形类型对应的SWF文件。例如,我们现在要创建的是3D柱状图形,那么我们的SWF文件就是FCF_Column3D.swf。上篇文章已经介绍过了,所有的SWF文件都放在FusionChartsFree>Charts文件夹里。2.XML数据文件。FCF只接受基于XML格式的数据。因此,你需要把你的数据转成XML格式。3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。在我们进行上面的工作之前,我们先要新建一个文件夹。例如,我们创建一个叫c:\FusionCharts 的文件夹。以后我们的例子都放到这个里面。对于我们的第一个例子来说,我们将在c:\FusionCharts下再建一个叫MyFirstChart的文件夹。
我们知道,FCF只接受XML格式的数据,其他如Excel,CSV,text等都不行。
现在我们按照上表中的数据,做成一个叫data.xml的XML文件,保存在工程根目录文件夹下(为了测试方便没分文件夹)。这个文件的容如下:
上面的代码里,有一个叫<graph>的root元素,它还有一些属性,用来定义标题,坐标轴,数值格式。我们还看到有很多<set>元素,它用来描述数据。name属性用来表示月份名称,value属性表示销售额,color属性表示图形颜色。
好了,所有工作都做完了,现在,你可以用IE打开Chart.html,就能看到你的第一个漂亮的Flash图形了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201201/5bee484d0f0392bd42849ad82cffcdd4.gif)
1.SWF 没有放到正确的文件夹。
2.在Chart.html里,SWF的路径设置不正确。
3.没有安装Flash Player。
4.没有启用浏览器Flash播放选项。
如果你得到了一个“Error in Loading Data”的消息,可能是:
1.Data.xml文件没放到正确的文件夹。
2.Data.xml的文件名不正确。比如,你可能不小心把它命名为Data.xml.txt。
如果你得到了一个“Invalid XML Data”的消息,可能是;
1.Data.xml里的内容有错误。
到这里,第一个图表就做完了,感觉怎么样?你是觉得简单呢,容易呢,还是小Case呢?
不过,这里我有个小问题,就是Data.xml里,yAxisName属性如果是中文的话,显示不出来。希望随着教程的继续,我进一步了解FCF以后,可以解决这个小问题,也许它就是BUG。
修改一下刚才 Data.xml 文件,加入几个中文字符,狂刷新浏览器,会看到几个不协调的字符。这里我修改图表标题(caption='Monthly Unit Sales' è caption='月销售历史'):
FusionCharts告诉我们XML文件加载失败,可能有非法字符。下面要修改Data.xml,使之好好工作。官方说当前Data.xml文件缺乏BOM标记(Byte Order Mark),打开UltraEdit 文本编辑器,另存为的时候,一定要选择:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201201/e03ecf1b645350fdbb4021e53a64318b.gif)
UTF-8编码方式(已经附加BOM标记),直接覆盖原文件。
再次刷新Demo.html 页面,即可看到标题变成了中文:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201201/ffb2a0f64ddc33c083d9400384547580.jpg)
若您对16进制熟悉,以16进制打开文件,直接修改前6位字符为
”EF BB BF”,保存成UTF-8格式即可。
牢记:静态的XML文件,须包含BOM特征码。
2. 让动态产生的XML文件避免中文问题
我们实验一下把Data.xml文件替换成动态生成XML方式。
新建一个JSP 页面:Data.jsp ,输入以下内容:
在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。
![](http://ajava.org/data/attachment/portal/201112/22/171102im8hf75mc2p4t7g8.gif)
够酷吧。在接下来的系列文章里,我将介绍使用JavaScript来加载Flash。
要使用FCF来创建图形,你需要做下面三件事情:1.选择好你要创建的图形类型对应的SWF文件。例如,我们现在要创建的是3D柱状图形,那么我们的SWF文件就是FCF_Column3D.swf。上篇文章已经介绍过了,所有的SWF文件都放在FusionChartsFree>Charts文件夹里。2.XML数据文件。FCF只接受基于XML格式的数据。因此,你需要把你的数据转成XML格式。3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。在我们进行上面的工作之前,我们先要新建一个文件夹。例如,我们创建一个叫c:\FusionCharts 的文件夹。以后我们的例子都放到这个里面。对于我们的第一个例子来说,我们将在c:\FusionCharts下再建一个叫MyFirstChart的文件夹。
3.1Eclipse工程目录结构
3.2创建XML数据文档
要做报表,当然要有数据了。在这个例子里,我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。我们知道,FCF只接受XML格式的数据,其他如Excel,CSV,text等都不行。
现在我们按照上表中的数据,做成一个叫data.xml的XML文件,保存在工程根目录文件夹下(为了测试方便没分文件夹)。这个文件的容如下:
<?xml version="1.0" encoding="UTF-8"?> <graph caption='每月销售额柱形图' 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>
上面的代码里,有一个叫<graph>的root元素,它还有一些属性,用来定义标题,坐标轴,数值格式。我们还看到有很多<set>元素,它用来描述数据。name属性用来表示月份名称,value属性表示销售额,color属性表示图形颜色。
3.3创建包含图形的HTML文件
每个图形都要被放到HTML文件里才能显示,现在,我们把下面的代码保存c:\FusionCharts\MyFirstChart\Chart.html文件里。<%@ 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> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="FusionCharts.js"></script> </head> <body bgcolor="#ffffff"> <div id="chartDiv" align="center">First Chart Container Pie 3D</div> <script type="text/javascript"> var myChart1 = new FusionCharts("fusioncharts/FCF_Line.swf", "myChartId", "600", "350"); myChart1.setDataURL("data.xml"); myChart1.render("chartDiv"); </script> </body> </html>
好了,所有工作都做完了,现在,你可以用IE打开Chart.html,就能看到你的第一个漂亮的Flash图形了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201201/5bee484d0f0392bd42849ad82cffcdd4.gif)
3.4问题
如果你很不幸,没有在页面上看到图形,那么可能是下面的原因之一:1.SWF 没有放到正确的文件夹。
2.在Chart.html里,SWF的路径设置不正确。
3.没有安装Flash Player。
4.没有启用浏览器Flash播放选项。
如果你得到了一个“Error in Loading Data”的消息,可能是:
1.Data.xml文件没放到正确的文件夹。
2.Data.xml的文件名不正确。比如,你可能不小心把它命名为Data.xml.txt。
如果你得到了一个“Invalid XML Data”的消息,可能是;
1.Data.xml里的内容有错误。
到这里,第一个图表就做完了,感觉怎么样?你是觉得简单呢,容易呢,还是小Case呢?
不过,这里我有个小问题,就是Data.xml里,yAxisName属性如果是中文的话,显示不出来。希望随着教程的继续,我进一步了解FCF以后,可以解决这个小问题,也许它就是BUG。
3.5中文支持
1. 让 FusionCharts支持中文修改一下刚才 Data.xml 文件,加入几个中文字符,狂刷新浏览器,会看到几个不协调的字符。这里我修改图表标题(caption='Monthly Unit Sales' è caption='月销售历史'):
FusionCharts告诉我们XML文件加载失败,可能有非法字符。下面要修改Data.xml,使之好好工作。官方说当前Data.xml文件缺乏BOM标记(Byte Order Mark),打开UltraEdit 文本编辑器,另存为的时候,一定要选择:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201201/e03ecf1b645350fdbb4021e53a64318b.gif)
UTF-8编码方式(已经附加BOM标记),直接覆盖原文件。
再次刷新Demo.html 页面,即可看到标题变成了中文:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201201/ffb2a0f64ddc33c083d9400384547580.jpg)
若您对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。
3.6图形转换
上面的图形是一个柱形图,如果我们想用同样的数据,以饼图来展示,我们只需要将Chart.html代码中的“FCF_Column3D.swf”改成饼图的SWF文件就可以了,即“FCF_Pie3D.swf”。现在我们再刷新浏览器,看看效果:![](http://ajava.org/data/attachment/portal/201112/22/171102im8hf75mc2p4t7g8.gif)
够酷吧。在接下来的系列文章里,我将介绍使用JavaScript来加载Flash。
相关文章推荐
- FusionCharts Free中文开发指南 第三章--FusionCharts Free我的第一个图形
- FCF中文指南-第六章--FusionCharts Free图形的基本元素
- FusionCharts Free中文开发指南 第六章--FusionCharts Free图形的基本元素
- FCF中文指南-第七章--FusionCharts Free和XML
- FusionCharts Free中文开发指南 第七章--使用XML来创建和控制图形
- FusionCharts Free使用文档教程第三章-FusionCharts Free我的第一个图形
- FusionCharts Free中文开发指南[使用文档教程]第十一章--FCF中的基本数字格
- FusionCharts Free中文开发指南 第九章--动态改变图形的类型和数据
- FusionCharts Free中文开发指南 第十章--FCF中的下钻
- FusionCharts Free中文开发指南 第十一章--FCF中的基本数字格式
- FusionCharts Free使用文档教程第三章-FusionCharts Free我的第一个图形
- FusionCharts Free中文开发指南 第十二章--FCF中的特殊字符
- FusionCharts Free中文开发指南 第十四章--在JSP里使用FCF
- FCF中文指南-第二章--FusionCharts Free安装
- FusionCharts free(图形报表)中文开发指南
- FusionCharts Free中文开发指南 第十二章--FCF中的特殊字符
- FusionCharts Free中文开发指南 第四章--使用JavaScript加载图形
- FusionCharts Free中文开发指南 第八章--FusionCharts Free和组合图XML
- FusionCharts Free我的第一个图形
- FusionCharts Free中文开发指南