FCF中文指南-第三章--FusionCharts Free我的第一个图形
在介绍完了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文件,保存在工程根目录文件夹下(为了测试方便没分文件夹)。这个文件的容如下:
<?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图形了。
3.4问题
如果你得到了一个“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 ,输入以下内容:
<%@ 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图形转换
FCF中文指南-第三章--FusionCharts Free我的第一个图形相关推荐
- FCF中文指南-第七章--FusionCharts Free和XML
FusionCharts使用XML来创建和控制图形. 7.1数据类型 在FCF里,一共有四种数据类型. Boolean - 它的值为0或1,1表示true,0表示false.例如<graph s ...
- Python精确指南——第三章 Selenium和爬虫
3 Selenium 3.1 介绍 网络爬虫在互联网领域有着广泛的应用. Selenium是一个页面自动化控制框架.能够模拟实际操作,自动化获取网站提供的页面资源信息. Selen ...
- IA-32系统编程指南 - 第三章 保护模式的内存管理【1】
第三章 保护模式的内存管理[1] [作者:lion3875 原创文章 参考文献<Intel 64 and IA-32 system programming guide>] IA-32保护模 ...
- Java7并发编程指南——第三章:线程同步辅助类
Java7并发编程指南--第三章:线程同步辅助类 @(并发和IO流) Java7并发编程指南第三章线程同步辅助类 思维导图 项目代码 思维导图 项目代码 GitHub:Java7Concurrency ...
- Elasticsearch6.8开发指南-第三章-设置Elasticsearch
Elasticsearch6.8开发指南-第三章-设置Elasticsearch 本章简介 安装Elasticsearch 使用.zip或安装Elasticsearch.tar.gz 在Windows ...
- FCF中文指南-第一章--FusionCharts Free介绍
第一章--FusionCharts Free介绍 FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有 ...
- Kali Linux 无线渗透测试入门指南 第三章 绕过 WLAN 身份验证
第三章 绕过 WLAN 身份验证 作者:Vivek Ramachandran, Cameron Buchanan 译者:飞龙 协议:CC BY-NC-SA 4.0 简介 安全的错觉比不安全更加糟糕. ...
- ZeroMQ 中文指南 第四章 可靠的请求-应答模式【转载】
此文章转载自GitHub : https://github.com/anjuke/zguide-cn 作者信息如下. ZMQ 指南 作者: Pieter Hintjens ph@imatix.com, ...
- 高可用高性能负载均衡软件HAproxy详解指南-第三章:HAproxy实例
目录 haproxy案例1:定义独立日志文件 haproxy案例2:haproxy统计页面的输出机制 haproxy案例3:动静分离示例: haproxy案例4:实现web负载 haproxy案例5: ...
最新文章
- FineReport——权限分配以及自定义首页
- Python里面的多线程
- u盘插入linux系统没有反应_linux系统无法挂载U盘
- 单点登录技术解决方案介绍
- python附件发送到邮箱_python – 如何发送电子邮件附件?
- 开源框架openresty+nginx 实现web应用防火墙(WAF)
- PHP中获取CHECKBOX提交的内容及checkbox全选
- zookeeper核心面试问题及解答
- springboot requestmapping 正则_SpringBoot三招组合拳,手把手教你打出优雅的后端接口...
- Android 调整控件位置和大小(以textView为例,并设置字体与背景颜色)
- python json解析 超过对象_Python | 关于Requests与Json的使用小结
- 数据结构图之二(最小生成树--普里姆算法)
- 12个你值得拥有的虚拟科学实验APP、工具和资源
- Android页面引导蒙版(浮层)库
- 在Kali系统配置临时IP和静态IP
- MVC/POJO/POJI/DAO/DTO/VO
- vscode更换主题颜色(护眼色)
- Keil5改黑色炫酷背景
- 输入一个数字n输出n以内的素数
- OpenLayers标记地图点及点击地图点显示自定义弹出框