FusionCharts Free我的第一个图形

最新推荐文章于 2018-09-07 11:36:00 发布

沙漏无语

最新推荐文章于 2018-09-07 11:36:00 发布

阅读量818

点赞数

分类专栏：生活

生活专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何使用FusionCharts Free (FCF) 创建一个展示月销售额的3D柱状图。从搭建环境到数据准备，再到最终的HTML集成，一步步引导读者完成图形的创建。此外，还探讨了中文支持的问题及解决方案。

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

参考博客

https://i-blog.csdnimg.cn/blog_migrate/88e5a97a4341c705fb7d9ceea13ffa20.png

http://blog.csdn.net/chenssy/article/details/9773797

在介绍完了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的文件夹。

3.1Eclipse工程目录结构

3.2创建XML数据文档

要做报表，当然要有数据了。在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。

我们知道，FCF只接受XML格式的数据，其他如Excel，CSV，text等都不行。

现在我们按照上表中的数据，做成一个叫data.xml的XML文件，保存在工程根目录文件夹下（为了测试方便没分文件夹）。这个文件的容如下：

[html]view plaincopy 
    
 <?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文件里。

[html]view plaincopy 
     
 <%@ 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图形了。

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 文本编辑器，另存为的时候，一定要选择：

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

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

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

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

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

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

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

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

[html]view plaincopy 
     
 <%@ 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);  
 %>  