文章分类:Web前端
图片添加onload时间,就OK
获取图片URL地址,需要传递节点对象,解析出图片url地址
// 图片透明
function setPng(img, w, h) {
ua = window.navigator.userAgent.toLowerCase();
if (!/msie/.test(ua))
return;
imgStyle = "display:inline-block;" + img.style.cssText;
strNewHTML = "<span style=/"width:" + w + "px; height:" + h + "px;"
+ imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+ img.src + "', sizingMethod='scale');/"></span>";
img.outerHTML = strNewHTML;
}
图片添加onload时间,就OK
<img id="s_weather_img" src=""
οnlοad="javascript:setPng(this, 60, 50);" style="display: none;">
获取图片URL地址,需要传递节点对象,解析出图片url地址
function getImg(obj){
var imgPng;
ua = window.navigator.userAgent.toLowerCase();
if(!/msie/.test(ua)){
imgPng=obj.find("img").attr('src');
}else{
var style=obj.find("span").attr('style');
var start=style.indexOf("'");
style=style.substring(start+1);
var end=style.indexOf("'");
imgPng=style.substring(0,end);
}
return imgPng;
}
1.结合时间控件WdatePicker使用,根据radio值不同,控件显示不同到时间格式.
jquery操作iframe :
这样获取iframe的window,接着就可以用find方法查找操作页面了.
在IFRAME中操作 选中父窗口中的所有单选钮
easyui 应用问题:
1：tree树的问题:访问json数据的attributes的属性
2:tabs 绑定标签选中事件
jquery/JS解析字符串成XML格式,执行操作,在IE8和chrome上正常
$(document).ready(
function(){
$("input[name='month']").attr('class','Wdate');
setMonth();
$("input[name='checkMonth']").bind('change',
function(){
setMonth();
}
);
}
);
function setMonth(){
$("input[name='month']").val('');
$("input[name='month']").bind('focus',
function(){
if($("input:checked[name='checkMonth']").val()=='1'){
setPatterm('yyyy-MM');
}
else if($("input:checked[name='checkMonth']").val()=='2'){
setPatterm('yyyy');
}
}
);
}
function setPatterm(patterm){
WdatePicker({isShowClear:false,readOnly:true,dateFmt:patterm});
}
<td class="fieldname" width="20%">
<input type="radio" name="checkMonth" value="1" />月 <input type="radio" name="checkMonth" checked="checked" value="2"/>年
</td>
<td class="fieldvalue" width="30%">
<input type="text" class="label" name="month" value=""/>
</td>
jquery操作iframe :
$(window.frames["frameId"].document)这样获取iframe的window,接着就可以用find方法查找操作页面了.
在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");//同理,操作父窗口.easyui 应用问题:
1：tree树的问题:访问json数据的attributes的属性
node.attributes[0].url2:tabs 绑定标签选中事件
$("#tab_pay_plan").bind("click.tabs",function(){});jquery/JS解析字符串成XML格式,执行操作,在IE8和chrome上正常
var xmlstr="<xml><test id='1'></test></xml>";
var xmldom=null
if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1)
{
xmldom=new ActiveXObject("Microsoft.XMLDOM");
xmldom.loadXML(xmlstr);
}
else
xmldom=new DOMParser().parseFromString(xmlstr,"text/xml")
alert(xmldom.getElementsByTagName("test").length);
//alert($(xmldom).find("test").size());也可以用jquery操作.
由于是在客户上的框架上做开发,因为是比较老的框架,ajax框架也是没有的,只有自己手写了.现在写起来还有点问题的.
主要还是封装获取XMLHttpRequest对象,应用的时候直接调用就可以了.
下面是父select和子select的代码
父select 改变时执行的JS:
后台代码:
将栏目列表防止到子select里面:
主要还是封装获取XMLHttpRequest对象,应用的时候直接调用就可以了.
//实现ajax
var http_request = false;
function send_request(url,poststr,processRequest) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("POST", url, false);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(poststr);
}下面是父select和子select的代码
<select name="channelId" οnchange="getSections(this,'sectionId');">
<option value="" >无</option>
<c:if test="${channels!=null}" >
<c:forEach items='${channels}' var='cc'>
<option value="<bean:write name="cc" property="channelId" />" ><c:out value='${cc.channelName}' escapeXml="false"/>
</option>
</c:forEach>
</c:if>
</select>
<select name="sectionId" id="sectionId">
<option value="" >无</option>
</select>
父select 改变时执行的JS:
//获取频道下的栏目
function getSections(o,s){
var sectionId=document.getElementById(s);
if(o.value!=''){
send_request('<%=request.getContextPath()%>/itv/voteAction.do?act=getSectionsBychannelId','channelId='+o.value,setSections);
}else{
sectionId.options.length = 0;
var varItem = new Option('无', '');
sectionId.options.add(varItem);
}
} 后台代码:
public ActionForward getSectionsBychannelId(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) throws IOException {
log.debug("channelId获取sections");
VoteForm voteForm = (VoteForm) form;
response.setContentType("text/html;charset=UTF-8");
String channelId = request.getParameter("channelId"); //获取参数中的值
sectionManager = (SectionManagerImpl) SpringWebUtils.getApplicationContext(request).getBean("sectionManager");
List sections=sectionManager.getSectionsBychannelId(Long.valueOf(channelId));
//组装栏目选项
StringBuffer results = new StringBuffer("<sections>");
for (int i = 0; i < sections.size(); i++) {
Section s=(Section)sections.get(i);
results.append("<section");
results.append(" id=/""+s.getSectionId()+"/"");
results.append(" sectionName=/""+s.getSectionName()+"/"");
results.append(" />");
}
results.append("</sections>");
response.setContentType("text/xml;");
PrintWriter pw = response.getWriter();
pw.print(results.toString());
pw.flush();
pw.close();
return null;
}将栏目列表防止到子select里面:
function setSections(data){
var sectionId=document.getElementById('sectionId');
sectionId.options.length = 0;
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
var sections=http_request.responseXML.getElementsByTagName('section');
if(sections.length!=0){
for(var j=0;j<sections.length;j++){
var option=new Option(sections[j].getAttribute('sectionName'),sections[j].getAttribute('id'));
sectionId.options.add(option);
}
}
else{
var varItem = new Option('无', '');
sectionId.options.add(varItem);
}
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
JavaScript节点操作DOMDocument属性和方法 2009-04-14 16:12 注意大小写一定不能弄错.
属性:
1 Attributes 存储节点的属性列表(只读)
2 childNodes 存储节点的子节点列表(只读)
3 dataType 返回此节点的数据类型
4 Definition 以DTD或XML模式给出的节点的定义(只读)
5 Doctype 指定文档类型节点(只读)
6 documentElement 返回文档的根元素(可读写)
7 firstChild 返回当前节点的第一个子节点(只读)
8 Implementation 返回XMLDOMImplementation对象
9 lastChild 返回当前节点最后一个子节点(只读)
10 nextSibling 返回当前节点的下一个兄弟节点(只读)
11 nodeName 返回节点的名字(只读)
12 nodeType 返回节点的类型(只读)
13 nodeTypedValue 存储节点值(可读写)
14 nodeValue 返回节点的文本(可读写)
15 ownerDocument 返回包含此节点的根文档(只读)
16 parentNode 返回父节点(只读)
17 Parsed 返回此节点及其子节点是否已经被解析(只读)
18 Prefix 返回名称空间前缀(只读)
19 preserveWhiteSpace 指定是否保留空白(可读写)
20 previousSibling 返回此节点的前一个兄弟节点(只读)
21 Text 返回此节点及其后代的文本内容(可读写)
22 url 返回最近载入的XML文档的URL(只读)
23 Xml 返回节点及其后代的XML表示(只读)
方法:
1 appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
2 cloneNode 返回当前节点的拷贝
3 createAttribute 创建新的属性
4 createCDATASection 创建包括给定数据的CDATA段
5 createComment 创建一个注释节点
6 createDocumentFragment 创建DocumentFragment对象
7 createElement 创建一个元素节点
8 createEntityReference 创建EntityReference对象
9 createNode 创建给定类型,名字和命名空间的节点
10 createPorcessingInstruction 创建操作指令节点
11 createTextNode 创建包括给定数据的文本节点
12 getElementsByTagName 返回指定名字的元素集合
13 hasChildNodes 返回当前节点是否有子节点
14 insertBefore 在指定节点前插入子节点
15 Load 导入指定位置的XML文档
16 loadXML 导入指定字符串的XML文档
17 removeChild 从子结点列表中删除指定的子节点
18 replaceChild 从子节点列表中替换指定的子节点
19 Save 把XML文件存到指定节点
20 selectNodes 对节点进行指定的匹配,并返回匹配节点列表
21 selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
22 transformNode 使用指定的样式表对节点及其后代进行转换
23 transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
*********************************
DOM(文档对象模型)
DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母
来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所
有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下：
其实DOM教给我们的就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子
目录……
根节点：
DOM把层次中的每一个对象都称之为节点（NODE），以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用
document.documentElement来访问它，它就是整个节点树的根节点（ROOT）
子节点：
一般意义上的节点，根节点以下最大子节点就是主文档区<body>了，要访问到body标签，在脚本中应该写：
document.body
body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点），大家知道HTML说到底只是文本而矣，
不论怎么样的网页必然由这两个节点组成，也只能由这两个节点组成
节点之间的关系：
节点之间的关系也是DOM中最重要的一个关节，如何正确地引用到节点对象，一定要清楚节点树各个节点的相互描述方式，在DHTML里，
Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。
节点的绝对引用：
返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement
节点的相对引用：(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合（包含文本节点及标签节点）
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling
节点的各种操作：(设当前的节点为node)
新增标签节点句柄：
document.createElement(sNode) //参数为要新添的节点标签名，例：newnode=document.createElement("div");
1、添加节点：
追加子节点：
node.appendChild(oNode) //oNode为生新增的节点句柄,例：node.appendChild(newnode)
应用标签节点
node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值：outside / inside，加在当前节点外面还是里面
插入节点
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改节点：
删除节点
node.remove()
node.removeChild()
node.removeNode()
替换节点
node.replaceChild()
node.replaceNode()
node.swapNode()
2、复制节点：
返回复制复制节点引用
node.cloneNode(bAll)//bAll为布尔值，true / false 是否克隆该节点所有子节点
3、节点信息
是否包含某节点
node.contains()
是否有子节点
node.hasChildNodes()
*******************************************************
下面为javascript操作xml
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加载文档
//doc.load("b.xml");
//创建文件头
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");
//添加文件头
doc.appendChild(p);
//用于直接加载时获得根接点
//var root = doc.documentElement;
//两种方式创建根接点
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//创建子接点
var n = doc.createNode(1,"ttyp","");
//指定子接点文本
//n.text = " this is a test";
//创建孙接点
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//创建属性
var r = doc.createAttribute("id");
r.value="test";
//添加属性
n.setAttributeNode(r);
//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加属性
n.setAttributeNode(r1);
//删除第二个属性
n.removeAttribute("class");
//添加孙接点
n.appendChild(o);
//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));
//添加注释
n.appendChild(doc.createComment("this is a comment/n"));
//添加子接点
root.appendChild(n);
//复制接点
var m = n.cloneNode(true);
root.appendChild(m);
//删除接点
root.removeChild(root.childNodes(0));
//创建数据段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);
//添加根接点
doc.appendChild(root);
//查找接点
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//显示改接点的属性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改节点,利用XPATH定位节点
var b = doc.selectSingleNode("//ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存（需要在服务端，客户端用FSO）
//doc.save();
//查看根接点XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
属性:
1 Attributes 存储节点的属性列表(只读)
2 childNodes 存储节点的子节点列表(只读)
3 dataType 返回此节点的数据类型
4 Definition 以DTD或XML模式给出的节点的定义(只读)
5 Doctype 指定文档类型节点(只读)
6 documentElement 返回文档的根元素(可读写)
7 firstChild 返回当前节点的第一个子节点(只读)
8 Implementation 返回XMLDOMImplementation对象
9 lastChild 返回当前节点最后一个子节点(只读)
10 nextSibling 返回当前节点的下一个兄弟节点(只读)
11 nodeName 返回节点的名字(只读)
12 nodeType 返回节点的类型(只读)
13 nodeTypedValue 存储节点值(可读写)
14 nodeValue 返回节点的文本(可读写)
15 ownerDocument 返回包含此节点的根文档(只读)
16 parentNode 返回父节点(只读)
17 Parsed 返回此节点及其子节点是否已经被解析(只读)
18 Prefix 返回名称空间前缀(只读)
19 preserveWhiteSpace 指定是否保留空白(可读写)
20 previousSibling 返回此节点的前一个兄弟节点(只读)
21 Text 返回此节点及其后代的文本内容(可读写)
22 url 返回最近载入的XML文档的URL(只读)
23 Xml 返回节点及其后代的XML表示(只读)
方法:
1 appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
2 cloneNode 返回当前节点的拷贝
3 createAttribute 创建新的属性
4 createCDATASection 创建包括给定数据的CDATA段
5 createComment 创建一个注释节点
6 createDocumentFragment 创建DocumentFragment对象
7 createElement 创建一个元素节点
8 createEntityReference 创建EntityReference对象
9 createNode 创建给定类型,名字和命名空间的节点
10 createPorcessingInstruction 创建操作指令节点
11 createTextNode 创建包括给定数据的文本节点
12 getElementsByTagName 返回指定名字的元素集合
13 hasChildNodes 返回当前节点是否有子节点
14 insertBefore 在指定节点前插入子节点
15 Load 导入指定位置的XML文档
16 loadXML 导入指定字符串的XML文档
17 removeChild 从子结点列表中删除指定的子节点
18 replaceChild 从子节点列表中替换指定的子节点
19 Save 把XML文件存到指定节点
20 selectNodes 对节点进行指定的匹配,并返回匹配节点列表
21 selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
22 transformNode 使用指定的样式表对节点及其后代进行转换
23 transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
*********************************
DOM(文档对象模型)
DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母
来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所
有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下：
其实DOM教给我们的就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子
目录……
根节点：
DOM把层次中的每一个对象都称之为节点（NODE），以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用
document.documentElement来访问它，它就是整个节点树的根节点（ROOT）
子节点：
一般意义上的节点，根节点以下最大子节点就是主文档区<body>了，要访问到body标签，在脚本中应该写：
document.body
body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点），大家知道HTML说到底只是文本而矣，
不论怎么样的网页必然由这两个节点组成，也只能由这两个节点组成
节点之间的关系：
节点之间的关系也是DOM中最重要的一个关节，如何正确地引用到节点对象，一定要清楚节点树各个节点的相互描述方式，在DHTML里，
Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。
节点的绝对引用：
返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement
节点的相对引用：(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合（包含文本节点及标签节点）
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling
节点的各种操作：(设当前的节点为node)
新增标签节点句柄：
document.createElement(sNode) //参数为要新添的节点标签名，例：newnode=document.createElement("div");
1、添加节点：
追加子节点：
node.appendChild(oNode) //oNode为生新增的节点句柄,例：node.appendChild(newnode)
应用标签节点
node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值：outside / inside，加在当前节点外面还是里面
插入节点
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改节点：
删除节点
node.remove()
node.removeChild()
node.removeNode()
替换节点
node.replaceChild()
node.replaceNode()
node.swapNode()
2、复制节点：
返回复制复制节点引用
node.cloneNode(bAll)//bAll为布尔值，true / false 是否克隆该节点所有子节点
3、节点信息
是否包含某节点
node.contains()
是否有子节点
node.hasChildNodes()
*******************************************************
下面为javascript操作xml
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加载文档
//doc.load("b.xml");
//创建文件头
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");
//添加文件头
doc.appendChild(p);
//用于直接加载时获得根接点
//var root = doc.documentElement;
//两种方式创建根接点
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//创建子接点
var n = doc.createNode(1,"ttyp","");
//指定子接点文本
//n.text = " this is a test";
//创建孙接点
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//创建属性
var r = doc.createAttribute("id");
r.value="test";
//添加属性
n.setAttributeNode(r);
//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加属性
n.setAttributeNode(r1);
//删除第二个属性
n.removeAttribute("class");
//添加孙接点
n.appendChild(o);
//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));
//添加注释
n.appendChild(doc.createComment("this is a comment/n"));
//添加子接点
root.appendChild(n);
//复制接点
var m = n.cloneNode(true);
root.appendChild(m);
//删除接点
root.removeChild(root.childNodes(0));
//创建数据段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);
//添加根接点
doc.appendChild(root);
//查找接点
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//显示改接点的属性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改节点,利用XPATH定位节点
var b = doc.selectSingleNode("//ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存（需要在服务端，客户端用FSO）
//doc.save();
//查看根接点XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
虽然我不是美工，也不专门去学CSS，但是项目中遇到的一些技巧还是记下来的好。。
1.标签map-- 定义图像点击区域的集合
map 标签 map标签是成对出现的,以<map>开始，</map>结束
map标签必须配合area标签使用。
map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致。
2.获取鼠标的坐标
map 标签 map标签是成对出现的,以<map>开始，</map>结束
map标签必须配合area标签使用。
map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致。
<img src="/images/html_table.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="35,29,135,99" href="#" />
<!-- 引用四个值就说明是块矩形MAP。-->
<!-- 前面两个值是左上角坐标值，后面两个值是右下角坐标值-->
<!-- 坐标值都是相对于使用了MAP的元素而言。-->
<area shape="circle" coords="243,78,44" href="#" />
<area shape="poly" coords="120,137,195,154,135,207" href="#" />
</map>2.获取鼠标的坐标
function mouseClick(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
alert(mousePos.x+":"+mousePos.y);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onclick = mouseClick;
记录下开发过程中常用到的JS问题
1. 直接获取对性属性，更改值无效。
遇到的一个郁闷的问题，下面这样修改值居然无效。
需要这样写：
获取指定月的最后一天的日期
简单Map实现
//------------简单类似Map的功能 Start-----------//
去前后空格
判断undefined类型
删除节点
清除所有的ecForm的titleId
去除字符串或者数组的重复数据
1. 直接获取对性属性，更改值无效。
遇到的一个郁闷的问题，下面这样修改值居然无效。
var idValue=document.getElementById("id").value;
idValue="555";需要这样写：
var id=document.getElementById("id");
id.value="555";获取指定月的最后一天的日期
function getLastDate(month, year){
var ar = new Array(12);
ar[0] = 31; // January
ar[1] = (!leapYear(year)) ? 29 : 28; // February
ar[2] = 31; // March
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June
ar[6] = 31; // July
ar[7] = 31; // August
ar[8] = 30; // September
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December
return ar[month-1];
}
function leapYear(year) {
if (year % 4 == 0)
return true;
return false;
} 简单Map实现
//------------简单类似Map的功能 Start-----------//
function Map() {
var struct = function(key, value) {
this.key = key;
this.value = value;
}
var put = function(key, value){
for (var i = 0; i < this.arr.length; i++) {
if ( this.arr[i].key === key ) {
this.arr[i].value = value;
return;
}
}
this.arr[this.arr.length] = new struct(key, value);
}
var get = function(key) {
for (var i = 0; i < this.arr.length; i++) {
if ( this.arr[i].key === key ) {
return this.arr[i].value;
}
}
return '';
}
var remove = function(key) {
var v;
for (var i = 0; i < this.arr.length; i++) {
v = this.arr.pop();
if ( v.key === key ) {
continue;
}
this.arr.unshift(v);
}
}
var size = function() {
return this.arr.length;
}
var isEmpty = function() {
return this.arr.length <= 0;
}
this.arr = new Array();
this.get = get;
this.put = put;
this.remove = remove;
this.size = size;
this.isEmpty = isEmpty;
}
//------------简单类似Map的功能 end-----------//去前后空格
function trim(s){
return s.relace(/^/s*/,' ').relace(//s*$/,' ');
}判断undefined类型
var exp = undefined;
if (typeof(exp) == "undefined") {
alert("undefined");}删除节点
xxx.removeChild(obj) xxx是所删除节点的父节点
xxx.removeNode(true) xxx是所要删除的节点(IE支持)
object.parentNode.removeChild(object) (firefox支持)
清除所有的ecForm的titleId
function clear(tagsName){
var allInput=document.getElementsByName(tagsName);
for(var i=allInput.length-1;i>=0;i--){
if(allInput[i].type=='hidden'){
allInput[i].parentNode.removeChild(allInput[i]);
}
}
}
这里循环需要倒序。去除字符串或者数组的重复数据
function getUnique(str){
if(str==""){
return str;
}
var strAry=str.split(",") ;
return unique(strAry).join(",");
}
function unique(data){
data = data || [];
var a = {};
for (var i=0; i<data.length; i++) {
var v = data[i];
if (typeof(a[v]) == 'undefined'){
a[v] = 1;
}
};
data.length=0;
for (var i in a){
data[data.length] = i;
}
return data;
}
前面我们讲的例子里，都是采用HTML或JavaScript来显示图形，这是一种最基本的使用方法。FCF还提供了一些其他的方法来显示图形，有 PHP、ASP、JSP等等。不过，有点要说明的是，这些方法其实都是基本使用方法的一种变形，它们最终其实都是在页面上输出HTML或 JavaScript。因此，如果你觉得采用HTML或JavaScript就足够了，那就不需要阅读本章了。
我们来看个例子吧。
这是XML数据代码：
这个是JSP代码：
我们可以看到，上例中采用了jsp的include标签，包含了一个叫FusionChartsHTMLRenderer.jsp的JSP页面， 它接受一些参数，用来加载数据或控制图形，debugMode必须是flase，因为在FCF里是没有调试功能的。这个JSP页面最终输出的是一段采用 HTML来加载图形的代码。它就在下载包 > Code > JSP > Includes文件夹里。
还有另外一个JSP--FusionChartsRenderer.jsp，它输出的是一段采用JavaScript来加载图形的代码。下面是它的使用代码：
debugMode和registerWithJS必须是flase，因为在FCF里是没有这两个功能的。
上面两个页面，显示的图形是一样的：
图片1
结束语关于FCF的使用，到这里基本就结束了，大家在阅读练习的过程中，如果发现文章有什么错误，或者是你遇到了一些问题，都可以和我联系，联系方式是：QQ:634369863。FCF论坛：AJava Ask。此教程的官方网站是AJava。
我们来看个例子吧。
这是XML数据代码：
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' 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> 这个是JSP代码：
<HTML>
<HEAD>
<TITLE>FusionCharts Free - Simple Column 3D Chart</TITLE>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER>
<h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> Examples</h2>
<h4>Basic example using pre-built Data.xml</h4>
<%
//Create the chart - Column 3D Chart with data from Data/Data.xml
%>
<jsp:include page="../Includes/FusionChartsHTMLRenderer.jsp" flush="true">
<jsp:param name="chartSWF" value="../../FusionCharts/FCF_Column3D.swf" />
<jsp:param name="strURL" value="Data/Data.xml" />
<jsp:param name="strXML" value="" />
<jsp:param name="chartId" value="myFirst" />
<jsp:param name="chartWidth" value="600" />
<jsp:param name="chartHeight" value="300" />
<jsp:param name="debugMode" value="false" />
</jsp:include>
<BR>
<BR>
<a href='../NoChart.html' target="_blank">Unable to see the chart
above?</a>
<BR><H5 ><a href='../default.htm'>« Back to list of examples</a></h5>
</CENTER>
</BODY>
</HTML> 我们可以看到，上例中采用了jsp的include标签，包含了一个叫FusionChartsHTMLRenderer.jsp的JSP页面， 它接受一些参数，用来加载数据或控制图形，debugMode必须是flase，因为在FCF里是没有调试功能的。这个JSP页面最终输出的是一段采用 HTML来加载图形的代码。它就在下载包 > Code > JSP > Includes文件夹里。
还有另外一个JSP--FusionChartsRenderer.jsp，它输出的是一段采用JavaScript来加载图形的代码。下面是它的使用代码：
<HTML>
<HEAD>
<TITLE>FusionCharts Free - Simple Column 3D Chart</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER>
<h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> Examples</h2>
<h4>Embedding chart using FusionCharts JavaScript class and using dataURL method.</h4>
<%
//Create the chart - Column 3D Chart with data from Data/Data.xml
%>
<jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true">
<jsp:param name="chartSWF" value="../../FusionCharts/FCF_Column3D.swf" />
<jsp:param name="strURL" value="Data/Data.xml" />
<jsp:param name="strXML" value="" />
<jsp:param name="chartId" value="myFirst" />
<jsp:param name="chartWidth" value="600" />
<jsp:param name="chartHeight" value="300" />
<jsp:param name="debugMode" value="false" />
<jsp:param name="registerWithJS" value="false" />
</jsp:include>
<BR>
<BR>
<a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR><H5 ><a href='../default.htm'>« Back to list of examples</a></h5>
</CENTER>
</BODY>
</HTML> debugMode和registerWithJS必须是flase，因为在FCF里是没有这两个功能的。
上面两个页面，显示的图形是一样的：
图片1
结束语关于FCF的使用，到这里基本就结束了，大家在阅读练习的过程中，如果发现文章有什么错误，或者是你遇到了一些问题，都可以和我联系，联系方式是：QQ:634369863。FCF论坛：AJava Ask。此教程的官方网站是AJava。
有时候我们的数据并不是连续的，例如我们有一个反映每个月销售额的图形，然而，五月和六月的数据我们缺失了，像这种情况我们该如何处理呢？
FCF早就想到这个问题了，我们看看下面的代码：
我们看到，上面五月和六月的数据里，并没有value这个属性。
如果把这样的数据放到一个柱状图里，效果如下：
图片1
在五月和六月那里没有柱子。这就是我们想要的效果。
如果把这样的数据放到一个曲线图里，效果如下：
图片1
同样的，五月和六月那里没有线段，它是缺失的。
如果你想连五月和六月的标签都不显示，你可以这样：
<set />
当然，你还可以干脆连<set />都不要。不过那样会让看图的人容易误解，因为人们一般都会以为是按顺序来排列月份的。
多系列的图形也可以放置这样的断点数据。看下面的图：
上图的XML数据如下：
在category 元素里有个showName属性，当值为1时，就会显示；当值为0时，就不显示，哪怕给它提供了相应的数据。上面代码虽然有很多category，但是只有9个值为1的，所以图形里只显示了9个。
再看看dataset里有很多<set />，这就是没有数据。所以在图里我们看到了很多的断点。
FCF早就想到这个问题了，我们看看下面的代码：
<graph>
<set name='Jan' value='420' />
<set name='Feb' value='295' />
<set name='Mar' value='523' />
<set name='Apr' value='473' />
<set name='May' />
<set name='Jun' />
<set name='Jul' value='354' />
<set name='Aug' value='457' />
<set name='Sep' value='127' />
<set name='Oct' value='354' />
<set name='Nov' value='485' />
<set name='Dec' value='486' />
</graph> 我们看到，上面五月和六月的数据里，并没有value这个属性。
如果把这样的数据放到一个柱状图里，效果如下：
图片1
在五月和六月那里没有柱子。这就是我们想要的效果。
如果把这样的数据放到一个曲线图里，效果如下：
图片1
同样的，五月和六月那里没有线段，它是缺失的。
如果你想连五月和六月的标签都不显示，你可以这样：
<set />
当然，你还可以干脆连<set />都不要。不过那样会让看图的人容易误解，因为人们一般都会以为是按顺序来排列月份的。
多系列的图形也可以放置这样的断点数据。看下面的图：
上图的XML数据如下：
<graph caption='Discontinuous Data Demo' numdivlines='4' showgridbg='1' showhovercap='1'
lineThickness='1' animation='1' hoverCapSepChar=' ' anchorScale='0' showNames='1'
showValues='0' numVDivLines='12' anchorscale='0' rotateNames='1'>
<categories>
<category name='5/2001' showName='1'/>
<category name='6/2001' showName='0'/>
<category name='7/2001' showName='0'/>
<category name='8/2001' showName='1'/>
<category name='9/2001' showName='0'/>
<category name='10/2001' showName='0'/>
<category name='11/2001' showName='1'/>
<category name='12/2001' showName='0'/>
<category name='1/2002' showName='0'/>
<category name='2/2002' showName='1'/>
<category name='3/2002' showName='0'/>
<category name='4/2002' showName='0'/>
<category name='5/2002' showName='1'/>
<category name='6/2002' showName='0'/>
<category name='7/2002' showName='0'/>
<category name='8/2002' showName='1'/>
<category name='9/2002' showName='0'/>
<category name='10/2002' showName='0'/>
<category name='11/2002' showName='1'/>
<category name='12/2002' showName='0'/>
<category name='1/2003' showName='0'/>
<category name='2/2003' showName='1'/>
<category name='3/2003' showName='0'/>
<category name='4/2003' showName='1'/>
</categories>
<dataset seriesname='Series 1' color='00A900' showValue='0' lineThickness='2'
yaxismaxvalue='100' anchorAlpha='0'>
<set />
<set />
<set />
<set value='0' />
<set value='1' />
<set value='2' />
<set value='3' />
<set value='5' />
<set value='8' />
<set value='11' />
<set value='16' />
<set value='23' />
<set value='31' />
<set value='40' />
<set value='49' />
<set value='59' />
<set value='68' />
<set />
<set />
<set value='89' />
<set value='94' />
<set value='97' />
<set value='99' />
<set value='100' />
</dataset>
<dataset seriesname='Series 2' color='0000FF' showValue='0' lineThickness='2'
yaxismaxvalue='100' anchorAlpha='0'>
<set />
<set value='0' />
<set value='0' />
<set value='0' />
<set value='0' />
<set value='1' />
<set value='1' />
<set value='1' />
<set value='1' />
<set value='6' />
<set value='26' />
<set value='43' />
<set />
<set />
<set />
<set />
<set value='43' />
<set value='53' />
<set value='66' />
<set value='78' />
<set value='91' />
<set />
<set />
<set />
</dataset>
</graph> 在category 元素里有个showName属性，当值为1时，就会显示；当值为0时，就不显示，哪怕给它提供了相应的数据。上面代码虽然有很多category，但是只有9个值为1的，所以图形里只显示了9个。
再看看dataset里有很多<set />，这就是没有数据。所以在图里我们看到了很多的断点。
在FCF里，如果要在图形里用到一些特殊的字符，你就要对它进行编码，否则就无法显示。
欧元符号在FCF里显示“€”，你需要用“%80”来替换它。如下：
上面的代码会在数字前面都加上“€”。
英镑符号在FCF里显示“￡”，你需要用“%A3”来替换它。如下：
上面的代码会在数字前面都加上“￡”。
人民币符号在FCF里显示“￥”，你需要用“%A5”来替换它。如下：
上面的代码会在数字前面都加上“￥”。
分符号在FCF里显示“￠”，你需要用“%A2”来替换它。如下：
上面的代码会在数字后面都加上“￠”。
百分号符号在FCF里显示“%”，你需要用“%25”来替换它。如下：
上面的代码会在数字后面都加上“%”。
&符号在FCF里显示“&”，你需要用“&”来替换它。如下：
上面的代码标题显示为“Total of 2003 & 2004”。
>符号在FCF里显示“>”，你需要用“>”来替换它。如下：
上面的代码最后一个数字显示为“>10”。
如果要显示“<”，你可能以为用“<”就可以了，事实是不可能的。我还没试验出怎么才能显示“<”，也许没有这个必要。
单引号符号在FCF里显示“'”，你需要用“'”来替换它。如下：
上面的代码显示为“John's Count”。
如果你想要显示双引号，直接使用就可以了，前提是你的属性值是用单引号括起来的。如果你的属性值是用双引号括起来的，你要显示单引号，也可以直接使用，而不必用“'”来替换它。
欧元符号在FCF里显示“€”，你需要用“%80”来替换它。如下：
<graph decimalPrecision='0' numberPrefix='%80 '>
<set name='John' value='420' color='AFD8F8' />
<set name='Mary' value='295' color='F6BD0F' />
<set name='Tom' value='523' color='8BBA00' />
</graph> 上面的代码会在数字前面都加上“€”。
英镑符号在FCF里显示“￡”，你需要用“%A3”来替换它。如下：
<graph decimalPrecision='0' numberPrefix='%A3 '>
<set name='John' value='420' color='AFD8F8' />
<set name='Mary' value='295' color='F6BD0F' />
<set name='Tom' value='523' color='8BBA00' />
</graph> 上面的代码会在数字前面都加上“￡”。
人民币符号在FCF里显示“￥”，你需要用“%A5”来替换它。如下：
<graph decimalPrecision='0' numberPrefix='%A5 ' >
<set name='John' value='420' color='AFD8F8' />
<set name='Mary' value='295' color='F6BD0F' />
<set name='Tom' value='523' color='8BBA00' />
</graph> 上面的代码会在数字前面都加上“￥”。
分符号在FCF里显示“￠”，你需要用“%A2”来替换它。如下：
<graph decimalPrecision='0' numberSuffix='%A2 '>
<set name='John' value='420' color='AFD8F8' />
<set name='Mary' value='295' color='F6BD0F' />
<set name='Tom' value='523' color='8BBA00' />
</graph> 上面的代码会在数字后面都加上“￠”。
百分号符号在FCF里显示“%”，你需要用“%25”来替换它。如下：
<graph decimalPrecision='0' numberSuffix='%25 '>
<set name='John' value='42' color='AFD8F8' />
<set name='Mary' value='29' color='F6BD0F' />
<set name='Tom' value='52' color='8BBA00' />
</graph> 上面的代码会在数字后面都加上“%”。
&符号在FCF里显示“&”，你需要用“&”来替换它。如下：
<graph caption='Total of 2003 & 2004' decimalPrecision='0' >
<set name='John' value='420' color='AFD8F8' />
<set name='Mary' value='295' color='F6BD0F' />
<set name='Tom' value='523' color='8BBA00' />
</graph> 上面的代码标题显示为“Total of 2003 & 2004”。
>符号在FCF里显示“>”，你需要用“>”来替换它。如下：
<graph decimalprecision='0' >
<set name='0' value='420' color='AFD8F8' />
<set name='0-10' value='295' color='F6BD0F' />
<set name='> 10' value='523' color='8BBA00' />
</graph> 上面的代码最后一个数字显示为“>10”。
如果要显示“<”，你可能以为用“<”就可以了，事实是不可能的。我还没试验出怎么才能显示“<”，也许没有这个必要。
单引号符号在FCF里显示“'”，你需要用“'”来替换它。如下：
<graph decimalPrecision='0' >
<set name='John's Count' value='420' color='AFD8F8' />
<set name='Mary's Count' value='295' color='F6BD0F' />
<set name='Tom's Count' value='523' color='8BBA00' />
</graph> 上面的代码显示为“John's Count”。
如果你想要显示双引号，直接使用就可以了，前提是你的属性值是用单引号括起来的。如果你的属性值是用双引号括起来的，你要显示单引号，也可以直接使用，而不必用“'”来替换它。
在我们的报表里，经常要对数值进行一些格式化，如小数位，千分位等等。这在FCF里实现起来非常容易。下面我们就来看看。
控制小数位位数所有的FCF图形都支持decimalPrecision属性，这个属性是用来指定小数位的位数的。如果你没有指定这个属性的值， 那么FCF默认会显示小数位后面2位小数。这个属性是全局的，也就是说，它对这个图形上的所有数字都起作用。例如，如果你设置 decimalPrecision='0'，那么像这些12.432，13.4，13，就会显示成12，13，13。
同样的，如果你有0.12432，0.134 ， 0.13等数据，并且没有指定decimalPrecision的值，那么FCF就会显示成0.12，0.13，0.13。如果你把 decimalPrecision设置成4，那么就会显示成0.1243，0.1340，0.1300。
自动格式化数字FCF会自动的给你的数字加上K（千）或M（百万），如下图。
上图中，三个数字分别代表12500，13400，13300。FCF会自动地把这些数字转化为以千为单位，或是以百万为单位。
如果你不想这样，你就加上如下的代码：
效果如下：
现在显示的是全部的数字了。不过，它还加了一些逗号来分隔这些数字。如果你不喜欢这样，你就加上formatNumber=0。但是，如果设置了formatNumber=0，那么就不能格式化小数位了。
看起来代码就像这样：
效果是这样：
自定义千分位和小数分隔符FCF默认使用“.”作为小数分隔符，使用“,”作为千分位分隔符。这也是我们的使用习惯。如果你想改成其他的，也可以。
我们使用decimalSeparator 指定小数分隔符，使用thousandSeparator 指定千分位分隔符。例如，我们想把小数分隔符和千分位分隔符调换一下：
效果如下：
增加数字前缀和后缀FCF允许我们给所有的数字都加上前缀和后缀。
如果我们设置numberPrefix='$'，那么会在所有的数字前面就会加上“$”，就像这样：$40000, $50000。
如果我们设置numberSuffix='%25'，那么会在所以的数字后面加上“%”，就像这样：43%，39%。
我们注意到，“%”是经过了编码的。在FCF里，一些特殊的编码都需要经过编码。下一章我们会详细介绍特殊字符。
控制小数位位数所有的FCF图形都支持decimalPrecision属性，这个属性是用来指定小数位的位数的。如果你没有指定这个属性的值， 那么FCF默认会显示小数位后面2位小数。这个属性是全局的，也就是说，它对这个图形上的所有数字都起作用。例如，如果你设置 decimalPrecision='0'，那么像这些12.432，13.4，13，就会显示成12，13，13。
同样的，如果你有0.12432，0.134 ， 0.13等数据，并且没有指定decimalPrecision的值，那么FCF就会显示成0.12，0.13，0.13。如果你把 decimalPrecision设置成4，那么就会显示成0.1243，0.1340，0.1300。
自动格式化数字FCF会自动的给你的数字加上K（千）或M（百万），如下图。
上图中，三个数字分别代表12500，13400，13300。FCF会自动地把这些数字转化为以千为单位，或是以百万为单位。
如果你不想这样，你就加上如下的代码：
<graph formatNumberScale='0'..decimalPrecision='0'...> 效果如下：
现在显示的是全部的数字了。不过，它还加了一些逗号来分隔这些数字。如果你不喜欢这样，你就加上formatNumber=0。但是，如果设置了formatNumber=0，那么就不能格式化小数位了。
看起来代码就像这样：
<graph ... formatNumber='0' formatNumberScale='0' ..decimalPrecision='0'...> 效果是这样：
自定义千分位和小数分隔符FCF默认使用“.”作为小数分隔符，使用“,”作为千分位分隔符。这也是我们的使用习惯。如果你想改成其他的，也可以。
我们使用decimalSeparator 指定小数分隔符，使用thousandSeparator 指定千分位分隔符。例如，我们想把小数分隔符和千分位分隔符调换一下：
<graph ... decimalSeparator=',' thousandSeparator='.' > 效果如下：
增加数字前缀和后缀FCF允许我们给所有的数字都加上前缀和后缀。
如果我们设置numberPrefix='$'，那么会在所有的数字前面就会加上“$”，就像这样：$40000, $50000。
如果我们设置numberSuffix='%25'，那么会在所以的数字后面加上“%”，就像这样：43%，39%。
我们注意到，“%”是经过了编码的。在FCF里，一些特殊的编码都需要经过编码。下一章我们会详细介绍特殊字符。
在我们开发图形报表时，你可能会遇到这样的需求：用户要求点击柱状图的某根柱子，可查看它的详细数据。其他的一些基于java的图形报表组件，如 jfreechart，也可以实现加连接的功能，但是使用起来还是有点麻烦的。其实它不光是加连接麻烦，正个使用起来都很麻烦，需要你在后台编写大量的代 码。通过前面的章节，你应该知道，FCF的使用非常简单，你只需要关注你的数据如何产生就可以了。至于如何产生图形，并不需要你编一行代码。加连接也是如 此。
FCF支持三种类型的连接：
1、普通的超链接，在同一个窗口打开新的页面。
2、普通的超链接，在新窗口打开新的页面。
3、JavaScript连接。
普通的超链接
我们先来看看第一种情况。
想要在FCF图形里加连接，你只需要在数据集里加上一个link属性即可。如下：
我们发现URL是经过了编码的。是的，因为你的连接里可能会含有“?”，“&”等字符，所以需要编码。FCF在载入这个连接时，会对它进行解码，解码后上例中的连接就是“ShowDetails.asp?Month=Jan”。
我们看一个完整的例子。
如果把上面的数据用柱状图来显示，结果如下：
图片1
当我们把鼠标移到每个柱子上时，鼠标会变成连接样式，点击它，就会在新的窗口里打开相应的页面。
新窗口超链接
如果你想在一个新的窗口打开页面，只需要在连接的前面加上“n-”，就像下面的代码一样：
JavaScript连接
我们还可以加上JavaScript连接，在连接里，你可以调用任何在本页可以调用到的JavaScript函数。如下：
下图是一个点击连接后弹出提示框的例子。
FCF支持三种类型的连接：
1、普通的超链接，在同一个窗口打开新的页面。
2、普通的超链接，在新窗口打开新的页面。
3、JavaScript连接。
普通的超链接
我们先来看看第一种情况。
想要在FCF图形里加连接，你只需要在数据集里加上一个link属性即可。如下：
<set ... value='2235' ... link='ShowDetails.asp%3FMonth%3DJan' ...> 我们发现URL是经过了编码的。是的，因为你的连接里可能会含有“?”，“&”等字符，所以需要编码。FCF在载入这个连接时，会对它进行解码，解码后上例中的连接就是“ShowDetails.asp?Month=Jan”。
我们看一个完整的例子。
<graph caption='Monthly Sales Summary' subcaption='For the year 2006'
xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set name='Jan' value='17400' link='DemoLinkPages/DemoLink1.html' color='AFD8F8' />
<set name='Feb' value='19800' link='DemoLinkPages/DemoLink2.html' color='F6BD0F' />
<set name='Mar' value='21800' link='DemoLinkPages/DemoLink3.html' color='8BBA00' />
<set name='Apr' value='23800' link='DemoLinkPages/DemoLink4.html' color='FF8E46' />
<set name='May' value='29600' link='DemoLinkPages/DemoLink5.html' color='008E8E' />
<set name='Jun' value='27600' link='DemoLinkPages/DemoLink6.html' color='D64646' />
</graph> 如果把上面的数据用柱状图来显示，结果如下：
图片1
当我们把鼠标移到每个柱子上时，鼠标会变成连接样式，点击它，就会在新的窗口里打开相应的页面。
新窗口超链接
如果你想在一个新的窗口打开页面，只需要在连接的前面加上“n-”，就像下面的代码一样：
<graph caption='Monthly Sales Summary' subcaption='For the year 2006'
xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set name='Jan' value='17400' link='n-DemoLinkPages/DemoLink1.html' color='AFD8F8' />
<set name='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html' color='F6BD0F' />
<set name='Mar' value='21800' link='n-DemoLinkPages/DemoLink3.html' color='8BBA00' />
<set name='Apr' value='23800' link='n-DemoLinkPages/DemoLink4.html' color='FF8E46' />
<set name='May' value='29600' link='n-DemoLinkPages/DemoLink5.html' color='008E8E' />
<set name='Jun' value='27600' link='n-DemoLinkPages/DemoLink6.html' color='D64646' />
</graph> JavaScript连接
我们还可以加上JavaScript连接，在连接里，你可以调用任何在本页可以调用到的JavaScript函数。如下：
<set name='Japan' value='123' link="JavaScript:myJS('Japan, 123');" color='F6BD0F'/> 下图是一个点击连接后弹出提示框的例子。
http://ajava.org/uploads/090115/1_172017_1.jpg
在前面的章节里，我们已经了解了图形的基本使用方法以及图形XML，现在我们已经有能力做出基本的图形了，如果你现在就把它应用到你的项目里，我认为没有任何问题，而且我也相信你还能举一反三地，发展出一些“新”的用法。
那我们就开始吧。
动态改变图形的类型
在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。举个例子来说，在一个页面上， 显示了一个月销售额的柱状图，但用户要求还可以查看月销售额的饼图，区域图。要实现这个需求，一般的做法是，再做两个页面，一个显示饼图，一个显示区域 图，用户想看这两个图，点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术，来实现页面无刷新，这样用户的体验会更好一些。只是程序 员累一点而已。
难道我们一定要这么累吗？不！其实我们可以有更好的办法，前提是你采用了FCF作为你的报表解决方案。
那么，在FCF里，是怎么实现上面的需求的呢？简单点说，思路是这样的：
1、使用JavaScript加载第一个图形（如柱状图），至于是用dataXML方法，还是dataURL方法，都可以。
2、当需要改变图形类型（如改成饼图）时，我们再创建一个新的FusionCharts类实例（它的SWF文件是饼图），把它render到原来的DIV。
就是这么简单。
我们来看看代码吧。
上面的代码非常浅显，就不做解释了。
动态改变图形的数据我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。
那么为什么还要单独来讲解这个呢？因为FCF给我们提供了一个更简单的方法，那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid，第二个参数是XML数据字符。
来看看下面的代码。
当我们单击”改变数据“按钮后，会调用updateChart()方法，它会使用新的数据来重新构建图形。
这种方案看起来，好像是比较好。然而，在前面我们说了，使用dataXML方法加载数据时，不能含有中文字符，同理，使用 updateChartXML方法，也不能有中文字符。如果你要使用中文，还是用第一种方法吧。你可能会想，既然有updateChartXML方法，那 是不是有updateChartURL方法呢？我们用它不就可以了吗？是的，是有这个方法，不过，FusionCharts Free版本里没有，只有FusionCharts版本里有。想用吗？拿钱来！
下章我们来讲讲FCF的下钻图形，听上去很专业，其实就是图形的连接，包括超连接，JavaScript。
那我们就开始吧。
动态改变图形的类型
在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。举个例子来说，在一个页面上， 显示了一个月销售额的柱状图，但用户要求还可以查看月销售额的饼图，区域图。要实现这个需求，一般的做法是，再做两个页面，一个显示饼图，一个显示区域 图，用户想看这两个图，点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术，来实现页面无刷新，这样用户的体验会更好一些。只是程序 员累一点而已。
难道我们一定要这么累吗？不！其实我们可以有更好的办法，前提是你采用了FCF作为你的报表解决方案。
那么，在FCF里，是怎么实现上面的需求的呢？简单点说，思路是这样的：
1、使用JavaScript加载第一个图形（如柱状图），至于是用dataXML方法，还是dataURL方法，都可以。
2、当需要改变图形类型（如改成饼图）时，我们再创建一个新的FusionCharts类实例（它的SWF文件是饼图），把它render到原来的DIV。
就是这么简单。
我们来看看代码吧。
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//数据
var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/>
<set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>";
/*
* 当用户单击按钮时调用这个方法。
* 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。
*/
function updateChart(chartSWF){
//Create another instance of the chart.
var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
</script>
<form name='frmUpdate'>
Show as:
<input type='button' value='Column' onClick="javaScript:updateChart('../../FusionCharts/FCF_Column3D.swf');" name='btnColumn' />
<input type='button' value='Line' onClick="javaScript:updateChart('../../FusionCharts/FCF_Line.swf');" name='btnLine' />
<input type='button' value='Pie' onClick="javaScript:updateChart('../../FusionCharts/FCF_Pie3D.swf');" name='btnPie' />
</form>
</CENTER>
</BODY>
</HTML> 上面的代码非常浅显，就不做解释了。
动态改变图形的数据我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。
那么为什么还要单独来讲解这个呢？因为FCF给我们提供了一个更简单的方法，那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid，第二个参数是XML数据字符。
来看看下面的代码。
<HTML>
<HEAD>
<TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function updateChart(DOMId){
updateChartXML(domId,"<graph><set name='A' value='32' /></graph>");
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300");
chart1.setDataXML("<graph><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></graph>");
chart1.render("chart1div");
</script>
<form name='frmUpdate'>
<input type='button' value='改变数据' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate'>
</form>
</HTML> 当我们单击”改变数据“按钮后，会调用updateChart()方法，它会使用新的数据来重新构建图形。
这种方案看起来，好像是比较好。然而，在前面我们说了，使用dataXML方法加载数据时，不能含有中文字符，同理，使用 updateChartXML方法，也不能有中文字符。如果你要使用中文，还是用第一种方法吧。你可能会想，既然有updateChartXML方法，那 是不是有updateChartURL方法呢？我们用它不就可以了吗？是的，是有这个方法，不过，FusionCharts Free版本里没有，只有FusionCharts版本里有。想用吗？拿钱来！
下章我们来讲讲FCF的下钻图形，听上去很专业，其实就是图形的连接，包括超连接，JavaScript。
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第八章--FusionCharts Free和组合图XML
关键字: fusioncharts
本章我们来看看什么是组合图形，以及它的XML是怎么写的。
什么是组合图形
当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。FCF提供了双Y轴组合图，它有两个Y轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。
FCF里组合图分为2D和3D，下面的图形就是一个2D双Y轴组合图。
图片1
这个图里有月销售额和数量，X轴表示月份。现在我们来看看这两个Y轴：
主Y轴表示2005和2006的销售额，柱状图和这个主Y轴对应。
次Y轴表示数量，曲线图和次Y轴对应。
在双Y轴图形里，我们必须提供至少两个数据集，一个对应主Y轴，一个对应次Y轴。如果你没有提供两个，图形就不会正确显示。
代码上图的XML代码如下：
简单解释
这个组合图的XML和一个多系列图形的XML较为类似，因此，我们只解释以下不同的地方。
在双Y轴组合图里，有两个Y轴，每个Y轴都可以有它自己的刻度和数值格式属性。
PYAxisName表示主轴的名称，SYAxisName表示次轴的名称。
在每个数据集里，我们都必须用parentYAxis属性来指定它是属于哪个轴。这个属性的值只能是“P”或“S”。P代表主轴，S代表次轴。例如我们的代码里，在主轴上有两个销售额数据集--“2005”和“2006”：
在次轴上有一个数量数据集：
上面的例子里，数量数据集表示的是2005和2006当月数量的总数。实际上，我们可以在次轴上也设置两个数据集，一个表示2005年每月的数量，一个表示2006年的。大家可以自己练习一下。
注意在运行这个例子是，Flash文件应该使用FCF_MSColumn2DLineDY.swf，从上图我们可以看出，它是column和line的组合，因此要用FCF_MSColumn2DLineDY.swf。更多的图形和Flash文件的对应关系，请参见
什么是组合图形
当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。FCF提供了双Y轴组合图，它有两个Y轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。
FCF里组合图分为2D和3D，下面的图形就是一个2D双Y轴组合图。
图片1
这个图里有月销售额和数量，X轴表示月份。现在我们来看看这两个Y轴：
主Y轴表示2005和2006的销售额，柱状图和这个主Y轴对应。
次Y轴表示数量，曲线图和次Y轴对应。
在双Y轴图形里，我们必须提供至少两个数据集，一个对应主Y轴，一个对应次Y轴。如果你没有提供两个，图形就不会正确显示。
代码上图的XML代码如下：
<graph caption='Business Results 2005 v 2006' PYAxisName='Revenue' SYAxisName='Quantity'
xAxisName='Month' showValues='0' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70'
showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'
alternateHGridColor='f8f8f8' alternateHGridAlpha='60' SYAxisMaxValue='750'
>
<categories>
<category name='Jan' />
<category name='Feb' />
<category name='Mar' />
<category name='Apr' />
<category name='May' />
<category name='Jun' />
<category name='Jul' />
<category name='Aug' />
<category name='Sep' />
<category name='Oct' />
<category name='Nov' />
<category name='Dec' />
</categories>
<dataset seriesName='2006' parentYAxis='P' color='c4e3f7' numberPrefix='$'>
<set value='27400' />
<set value='29800' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>
<dataset seriesName='2005' parentYAxis='P' color='Fad35e' numberPrefix='$'>
<set value='10000' />
<set value='11500' />
<set value='12500' />
<set value='15000' />
<set value='11000' />
<set value='9800' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>
<dataset seriesName='Total Quantity' parentYAxis='S' color='8BBA00' anchorSides='10'
anchorRadius='3' anchorBorderColor='009900' >
<set value='270' />
<set value='320' />
<set value='290' />
<set value='320' />
<set value='310' />
<set value='320' />
<set value='340' />
<set value='470' />
<set value='420' />
<set value='440' />
<set value='480 '/>
<set value='360' />
</dataset>
</graph> 简单解释
这个组合图的XML和一个多系列图形的XML较为类似，因此，我们只解释以下不同的地方。
在双Y轴组合图里，有两个Y轴，每个Y轴都可以有它自己的刻度和数值格式属性。
PYAxisName表示主轴的名称，SYAxisName表示次轴的名称。
在每个数据集里，我们都必须用parentYAxis属性来指定它是属于哪个轴。这个属性的值只能是“P”或“S”。P代表主轴，S代表次轴。例如我们的代码里，在主轴上有两个销售额数据集--“2005”和“2006”：
<dataset seriesName='2006' parentYAxis='P' ... >
...
<dataset seriesName='2005' parentYAxis='P' ... > 在次轴上有一个数量数据集：
<dataset seriesName='Total Quantity' parentYAxis='S' ... > 上面的例子里，数量数据集表示的是2005和2006当月数量的总数。实际上，我们可以在次轴上也设置两个数据集，一个表示2005年每月的数量，一个表示2006年的。大家可以自己练习一下。
注意在运行这个例子是，Flash文件应该使用FCF_MSColumn2DLineDY.swf，从上图我们可以看出，它是column和line的组合，因此要用FCF_MSColumn2DLineDY.swf。更多的图形和Flash文件的对应关系，请参见
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第七章--FusionCharts Free和XML
关键字: fusioncharts
FusionCharts使用XML来创建和控制图形。
数据类型
在FCF里，一共有四种数据类型。
Boolean - 它的值为0或1，1表示true，0表示false。例如<graph showNames='1' >。
Number - 它的值应该是一个数值。例如<graph yAxisMaxValue='200' > 。
String - 它的值是一个字符串。例如<graph caption='My Chart' > 。
Hex Color Code - 它表示一个16进制的颜色，不需要用“#”。例如<graph bgColor='FFFFDD' >。
每个图形都有很多属性，我们都可以通过XML对它进行设置，但是，我们并不需要对每一个属性都进行设置，因为它们都有一个默认值，如果我们没有设置，FCF会使用默认值来替代。
FCF里有几种类型的XML结构：
单系列图形
单系列图形是指只有一个数据集的图形。例如，我们的第一个例子，每月销售情况 ，就是一个单系列图形（我们只有一年的数据）。我们并没有对数据进行比较，例如，比较两年的每月销售情况。
我们看看下面的例子。
图片1
上面的代码里多了一些我们没接触过的属性，没关系，在图形XML参考一章我们将详细介绍所有的图形可用的属性。
下面进行一下简单的解释
<graph>元素是所有FCF XML文档的主元素。它描述数据的开始和结束。它还有一些属性可以控制图形。这些属性我们在图形XML参考一章会讲到。
<set>元素是<graph>的子元素，它描述一个数据集，这个数据集决定了图形上的数据。一个典型的<set>元素看起来就像这样：
<trendLines> 元素，它可以在图形上画出一条趋势线。例如，下面的代码里，我们在26000这个值画出了一条线，用来表示月平均销售额。
多系列图形
多系列图形被用来比较两个或更多的数据集。
我们看看下面的代码。
图片1
我们发现，上面多了一个 <categories>元素，它包含很多的子元素，如
每个<category>就表示X轴上的一个名称。
上面还有两个<dataset>元素，一个用来表示2006年的数据，一个表示2005年。每个<set>则表示图形上的一个数据。
注意<categories>的子元素的数量应该和<dataset>子元素的一致。
下一章我们来看看组合图的XML。
数据类型
在FCF里，一共有四种数据类型。
Boolean - 它的值为0或1，1表示true，0表示false。例如<graph showNames='1' >。
Number - 它的值应该是一个数值。例如<graph yAxisMaxValue='200' > 。
String - 它的值是一个字符串。例如<graph caption='My Chart' > 。
Hex Color Code - 它表示一个16进制的颜色，不需要用“#”。例如<graph bgColor='FFFFDD' >。
每个图形都有很多属性，我们都可以通过XML对它进行设置，但是，我们并不需要对每一个属性都进行设置，因为它们都有一个默认值，如果我们没有设置，FCF会使用默认值来替代。
FCF里有几种类型的XML结构：
单系列图形
单系列图形是指只有一个数据集的图形。例如，我们的第一个例子，每月销售情况 ，就是一个单系列图形（我们只有一年的数据）。我们并没有对数据进行比较，例如，比较两年的每月销售情况。
我们看看下面的例子。
图片1
<graph caption='Business Results 2006' xAxisName='Month' yAxisName='Revenue' showValues='0'
numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'
divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8'
alternateHGridAlpha='60' >
<set name='Jan' value='27400' color='AFD8F8'/>
<set name='Feb' value='29800' color='F6BD0F' />
<set name='Mar' value='25800' color='8BBA00'/>
<set name='Apr' value='26800' color='FF8E46'/>
<set name='May' value='29600' color='008E8E' />
<set name='Jun' value='32600' color='D64646'/>
<set name='Jul' value='31800' color='8E468E'/>
<set name='Aug' value='36700' color='588526'/>
<set name='Sep' value='29700' color='B3AA00'/>
<set name='Oct' value='31900' color='008ED6'/>
<set name='Nov' value='34800' color='9D080D'/>
<set name='Dec' value='24800' color='A186BE' />
<trendlines>
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>
</trendlines>
</graph> 上面的代码里多了一些我们没接触过的属性，没关系，在图形XML参考一章我们将详细介绍所有的图形可用的属性。
下面进行一下简单的解释
<graph>元素是所有FCF XML文档的主元素。它描述数据的开始和结束。它还有一些属性可以控制图形。这些属性我们在图形XML参考一章会讲到。
<set>元素是<graph>的子元素，它描述一个数据集，这个数据集决定了图形上的数据。一个典型的<set>元素看起来就像这样：
<set name='Jan' value='27400' color='AFD8F8' hoverText="January, 17400" link="details.asp?month=jan" showName="1"/> <trendLines> 元素，它可以在图形上画出一条趋势线。例如，下面的代码里，我们在26000这个值画出了一条线，用来表示月平均销售额。
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/> 多系列图形
多系列图形被用来比较两个或更多的数据集。
我们看看下面的代码。
图片1
<graph caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue'
showValues='0' numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70'
showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'
alternateHGridColor='f8f8f8' alternateHGridAlpha='60' >
<categories>
<category name='Jan' />
<category name='Feb' />
<category name='Mar' />
<category name='Apr' />
<category name='May' />
<category name='Jun' />
<category name='Jul' />
<category name='Aug' />
<category name='Sep' />
<category name='Oct' />
<category name='Nov' />
<category name='Dec' />
</categories>
<dataset seriesName='2006' color='c4e3f7' >
<set value='27400' />
<set value='29800' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
<set value='31800' />
<set value='36700' />
<set value='29700' />
<set value='31900' />
<set value='34800' />
<set value='24800' />
</dataset>
<dataset seriesName='2005' color='Fad35e' >
<set value='10000'/>
<set value='11500'/>
<set value='12500'/>
<set value='15000'/>
<set value='11000' />
<set value='9800' />
<set value='11800' />
<set value='19700' />
<set value='21700' />
<set value='21900' />
<set value='22900' />
<set value='20800' />
</dataset>
<trendlines>
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>
</trendlines>
</graph> 我们发现，上面多了一个 <categories>元素，它包含很多的子元素，如
<category name='Jan' /> 每个<category>就表示X轴上的一个名称。
上面还有两个<dataset>元素，一个用来表示2006年的数据，一个表示2005年。每个<set>则表示图形上的一个数据。
注意<categories>的子元素的数量应该和<dataset>子元素的一致。
下一章我们来看看组合图的XML。
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第六章--FusionCharts Free图形的基本元素
关键字: fusioncharts
在我们了解了FCF的各种使用方法以后，我们就会发现，其实我们要做出各种不同的Flash图形，最关键的就是那个XML数据。它不但可以描述图形的数 据，还可以描述图形的样式。大家可能迫不及待的想要了解XML的细节，别急，在此之前，我们需要搞清楚图形的组成部分，比如什么是X轴，什么是Y轴，什么 是图形背景，什么是是图形边框。只有了解这些以后，我们才能做出我们相应的图形。
图形背景和画布
对于3D图形，你可以设置canvas background（画布背景）和Chart Background（图形背景）的颜色，还可以设置它们是否可见。
对于2D图形，你可以设置canvas background color（画布背景颜色），background alpha（背景透明度），canvas border color（画布边框颜色），canvas border thickness（画布边框厚度）等属性。
Chart Labels（图形标签）
你可以设置caption（标题）, sub caption（子标题）, x-axis name（X轴标签）, y-axis name（Y轴标签）, y-axis max limit（Y轴最大值）， y-axis min limit（Y轴最小值）, number Prefix（数值前缀）, number Suffix（数值后缀），Chart Legend（图例）。
DIV lines（刻度线）
你可以设置Trend Line（趋势线），Zero Plane（零平面），Div Line（刻度线）等的一些属性。
Alternating（间隔色）
你可以设置Alternating Colored Horizontal Grids（垂直表格间隔色）以及透明度，Alternating Colored Vertical Grids（水平表格间隔色）以及透明度。
Hover Caption（提示信息）
你可以设置hover caption background--提示框的背景，hover caption border提示框的边框，hover caption data separator character--提示信息的分割字符。
Anchors（锚点）
你可以设置Anchors（锚点）的shape（形状）, radius（半径）, border color（边框颜色）, thickness（边框厚度）, alpha（边框透明度）, background color（背景颜色）, background alpha（背景透明度） 等属性。
本章我们了解了一些图形基本构成元素，还了解了我们可以对它们进行哪些设置。下章我们将介绍一下FCF的XML。
图形背景和画布
对于3D图形，你可以设置canvas background（画布背景）和Chart Background（图形背景）的颜色，还可以设置它们是否可见。
对于2D图形，你可以设置canvas background color（画布背景颜色），background alpha（背景透明度），canvas border color（画布边框颜色），canvas border thickness（画布边框厚度）等属性。
Chart Labels（图形标签）
你可以设置caption（标题）, sub caption（子标题）, x-axis name（X轴标签）, y-axis name（Y轴标签）, y-axis max limit（Y轴最大值）， y-axis min limit（Y轴最小值）, number Prefix（数值前缀）, number Suffix（数值后缀），Chart Legend（图例）。
DIV lines（刻度线）
你可以设置Trend Line（趋势线），Zero Plane（零平面），Div Line（刻度线）等的一些属性。
Alternating（间隔色）
你可以设置Alternating Colored Horizontal Grids（垂直表格间隔色）以及透明度，Alternating Colored Vertical Grids（水平表格间隔色）以及透明度。
Hover Caption（提示信息）
你可以设置hover caption background--提示框的背景，hover caption border提示框的边框，hover caption data separator character--提示信息的分割字符。
Anchors（锚点）
你可以设置Anchors（锚点）的shape（形状）, radius（半径）, border color（边框颜色）, thickness（边框厚度）, alpha（边框透明度）, background color（背景颜色）, background alpha（背景透明度） 等属性。
本章我们了解了一些图形基本构成元素，还了解了我们可以对它们进行哪些设置。下章我们将介绍一下FCF的XML。
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第五章--FusionCharts Free使用dataXML加载数据
关键字: fusioncharts
在前面的例子里，我们使用的数据都是一个单独的XML文件，它可以被很多需要它的文件来调用。但是有的时候，我们可能不需要单独的文件，这时，我们就可以使用dataXML 方法来进行数据的调用。
使用dataXML提供数据
dataXML 和dataURL都可以提供数据，dataURL是以把XML文件地址以URL的形式告诉FCF，如一个静态的文件Data.xml，或者是一个动态的文 件，如mydata.jsp（页面返回XML格式的文本）。dataXML则是以XML文本的形式告诉FCF。可能有点不好理解，看看下面的代码就知道 了。
我们把上面的代码保存到一个叫ChartDataXML.html的文件里。
可以看到，FlashVars 的值是这样的一种形式：
使用JavaScript和dataXML
看下面的代码。
原来我们调用的是setDataURL()方法，而现在是setDataXML()方法，它的参数则是一个完整的XML字符串。
不管我们使用什么方法，我们都能得到一样的结果。
setDataXML()方法的问题
我们知道，在使用GET方法得到参数时，浏览器对参数值的长度是有一定的限制的，所以，如果XML字符过长，可能会产生问题。这时我们就需要使用setDataURL()方法。
如果你的XML字符里含有双字节字符，例如中文字符，你就不能使用setDataXML()方法，你应该使用setDataURL()方法。
最佳模式
在我们的实际应用里，数据不可能是静态的，它可能是有用户选择查询条件，然后提交给服务器，服务器返回一个查询的结果，比如 search.jsp?year=2008。所以我给大家推荐的最佳模式是使用setDataURL()方法，并且使用JavaScript来加载图形。
在使用setDataURL()方法时，如果地址里含有“?”、“&”等字符，你就需要对这个地址进行URL编码。在 JavaScript里进行编码，使用escape(url)这个函数。如果你想在服务器端就进行编码，那就使用你的编程语言提供的URL编码方法。在 java里进行编码的函数是java.net.URLEncoder.encode()。
使用dataXML提供数据
dataXML 和dataURL都可以提供数据，dataURL是以把XML文件地址以URL的形式告诉FCF，如一个静态的文件Data.xml，或者是一个动态的文 件，如mydata.jsp（页面返回XML格式的文本）。dataXML则是以XML文本的形式告诉FCF。可能有点不好理解，看看下面的代码就知道 了。
<html>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="../FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500" />
<param name="FlashVars" value="&dataXML=<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>">
<param name="quality" value="high" />
<embed src="../FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500" flashVars="&dataXML=<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>" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html> 我们把上面的代码保存到一个叫ChartDataXML.html的文件里。
可以看到，FlashVars 的值是这样的一种形式：
<PARAM NAME="FlashVars" Value="&dataXML=completeXMLData"><EMBED ... FlashVars="&dataXML=completeXMLData"> 使用JavaScript和dataXML
看下面的代码。
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
myChart.setDataXML("<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>");
myChart.render("chartdiv");
</script>
</body>
</html>
原来我们调用的是setDataURL()方法，而现在是setDataXML()方法，它的参数则是一个完整的XML字符串。
不管我们使用什么方法，我们都能得到一样的结果。
setDataXML()方法的问题
我们知道，在使用GET方法得到参数时，浏览器对参数值的长度是有一定的限制的，所以，如果XML字符过长，可能会产生问题。这时我们就需要使用setDataURL()方法。
如果你的XML字符里含有双字节字符，例如中文字符，你就不能使用setDataXML()方法，你应该使用setDataURL()方法。
最佳模式
在我们的实际应用里，数据不可能是静态的，它可能是有用户选择查询条件，然后提交给服务器，服务器返回一个查询的结果，比如 search.jsp?year=2008。所以我给大家推荐的最佳模式是使用setDataURL()方法，并且使用JavaScript来加载图形。
在使用setDataURL()方法时，如果地址里含有“?”、“&”等字符，你就需要对这个地址进行URL编码。在 JavaScript里进行编码，使用escape(url)这个函数。如果你想在服务器端就进行编码，那就使用你的编程语言提供的URL编码方法。在 java里进行编码的函数是java.net.URLEncoder.encode()。
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第四章--FusionCharts Free使用JavaScript加载图形
关键字: fusioncharts
在上篇文章里，我们做出了第一个图形报表，我们是直接在HTML里使用<OBJECT>和<EMBED>标记来加载图形的。
使用JS加载
这个JS类文件就在FusionChartsFree>JSClass文件夹下，我们把它拷贝到c:/FusionCharts/FusionCharts下面。
现在，我们把原来的Chart.html复制一份，命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，
下面就是JSChart.html的代码。
我们对上面的代码进行以下解释。
首先，我们用下面的语句来加载FusionCharts.js文件。
然后，我们定义了一个DIV，它还有个id。
我们的图形就出现在这个DIV里。
接着，我们用四个参数建立了一个FusionCharts对象，
第一个参数是SWF文件的地址。
第二个是图形的id。这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
最后，我们把图形渲染在指定的地方。
"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"。
现在你运行JSChart.html，你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形，更方便，更直观。
多图形
有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。
怎么加载多个图形呢？很简单，看下面。
仔细对比上面的四个图形代码，其实就是div的id，FusionCharts对象的名称,图形的id，还有图形的SWF地址这些地方发生了变化。最后的效果如下：
<html>
...
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="../FusionCharts/FCF_Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
...
</html> 使用JS加载
这个JS类文件就在FusionChartsFree>JSClass文件夹下，我们把它拷贝到c:/FusionCharts/FusionCharts下面。
现在，我们把原来的Chart.html复制一份，命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，
下面就是JSChart.html的代码。
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div>
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
</html> 我们对上面的代码进行以下解释。
首先，我们用下面的语句来加载FusionCharts.js文件。
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> 然后，我们定义了一个DIV，它还有个id。
<div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div> 我们的图形就出现在这个DIV里。
接着，我们用四个参数建立了一个FusionCharts对象，
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500"); 第一个参数是SWF文件的地址。
第二个是图形的id。这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
myChart.setDataURL("Data.xml"); 最后，我们把图形渲染在指定的地方。
myChart.render("chartdiv"); "chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"。
现在你运行JSChart.html，你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形，更方便，更直观。
多图形
有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。
怎么加载多个图形呢？很简单，看下面。
<html>
<head><title>多图形</title>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv1" align="center">First Chart Container Pie 3D</div>
<script type="text/javascript">
var myChart1 = new FusionCharts("../FusionCharts/FCF_pie3D.swf", "myChartId1", "600", "400");
myChart1.setDataURL("Data.xml");
myChart1.render("chartdiv1");
</script>
<div id="chartdiv2" align="center">Second Chart Container Column 3D</div>
<script type="text/javascript">
var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");
myChart2.setDataURL("Data.xml");
myChart2.render("chartdiv2");
</script>
<div id="chartdiv3" align="center">Third Chart Container Line 2D</div>
<script type="text/javascript">
var myChart3 = new FusionCharts("../FusionCharts/FCF_line.swf", "myChartId3", "600", "300");
myChart3.setDataURL("Data.xml");
myChart3.render("chartdiv3");
</script>
<div id="chartdiv4" align="center">Fourth Chart Container Area 2D</div>
<script type="text/javascript">
var myChart4 = new FusionCharts("../FusionCharts/FCF_area2D.swf", "myChartId4", "400", "250");
myChart4.setDataURL("Data.xml");
myChart4.render("chartdiv4");
</script>
</body>
</html>
仔细对比上面的四个图形代码，其实就是div的id，FusionCharts对象的名称,图形的id，还有图形的SWF地址这些地方发生了变化。最后的效果如下：
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第三章--FusionCharts Free我的第一个图形
关键字: fusioncharts
在介绍完了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的文件夹。
设置SWF文件我们还要在c:/FusionCharts下建一个叫FusionCharts的文件夹。现在，我们把所有的SWF文件都拷贝到到 这个文件下面（c:/FusionCharts/FusionCharts/）。以后，我们所有例子的代码，都要引用这个文件夹下面的SWF文件。
好了，SWF文件就设置好了。
创建XML数据文档
要做报表，当然要有数据了。在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。
我们知道，FCF只接受XML格式的数据，其他如Excel，CSV，text等都不行。
现在我们按照上表中的数据，做成一个叫Data.xml的XML文件，保存在c:/FusionCharts/MyFirstChart文件夹下。这个文件的内容如下：
上面的代码里，有一个叫<graph>的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多<set>元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
创建包含图形的HTML文件
每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:/FusionCharts/MyFirstChart/Chart.html文件里。
上面的代码，其实就是一个显示flash的简单标记。
movie参数值指定我们的SWF文件，即FCF_Column3D.swf。FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
看到这里，如果不熟悉在网页里调用Flash的朋友，可能会有点迷惑，因为我们发现有一个embed参数，它的各个值都和param参数的值是一样的，为什么会这样呢？
其实，这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的，而Netscape则是 使用embed参数来运行Flash。因此，为了保证我们的应用能够在大多数浏览器上运行，我们就需要加上embed参数，并且值和param完全相同。
好了，所有工作都做完了，现在，你可以用IE打开Chart.html，就能看到你的第一个漂亮的Flash图形了。
图片1
问题如果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一：
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。
图形转换上面的图形是一个柱形图，如果我们想用同样的数据，以饼图来展示，我们只需要将Chart.html代码中的“FCF_Column3D.swf”改成饼图的SWF文件就可以了，即“FCF_Pie3D.swf”。现在我们再刷新浏览器，看看效果：
图片1
够酷吧。
在接下来的系列文章里，我将介绍使用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的文件夹。
设置SWF文件我们还要在c:/FusionCharts下建一个叫FusionCharts的文件夹。现在，我们把所有的SWF文件都拷贝到到 这个文件下面（c:/FusionCharts/FusionCharts/）。以后，我们所有例子的代码，都要引用这个文件夹下面的SWF文件。
好了，SWF文件就设置好了。
创建XML数据文档
要做报表，当然要有数据了。在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。
我们知道，FCF只接受XML格式的数据，其他如Excel，CSV，text等都不行。
现在我们按照上表中的数据，做成一个叫Data.xml的XML文件，保存在c:/FusionCharts/MyFirstChart文件夹下。这个文件的内容如下：
<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='一月' value='462' color='AFD8F8' />
<set name='二月' value='857' color='F6BD0F' />
<set name='三月' value='671' color='8BBA00' />
<set name='四月' value='494' color='FF8E46' />
<set name='五月' value='761' color='008E8E' />
<set name='六月' value='960' color='D64646' />
<set name='七月' value='629' color='8E468E' />
<set name='八月' value='622' color='588526' />
<set name='九月' value='376' color='B3AA00' />
<set name='十月' value='494' color='008ED6' />
<set name='十一月' value='761' color='9D080D' />
<set name='十二月' value='960' color='A186BE' />
</graph> 上面的代码里，有一个叫<graph>的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多<set>元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
创建包含图形的HTML文件
每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:/FusionCharts/MyFirstChart/Chart.html文件里。
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="../FusionCharts/FCF_Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html> 上面的代码，其实就是一个显示flash的简单标记。
movie参数值指定我们的SWF文件，即FCF_Column3D.swf。FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
看到这里，如果不熟悉在网页里调用Flash的朋友，可能会有点迷惑，因为我们发现有一个embed参数，它的各个值都和param参数的值是一样的，为什么会这样呢？
其实，这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的，而Netscape则是 使用embed参数来运行Flash。因此，为了保证我们的应用能够在大多数浏览器上运行，我们就需要加上embed参数，并且值和param完全相同。
好了，所有工作都做完了，现在，你可以用IE打开Chart.html，就能看到你的第一个漂亮的Flash图形了。
图片1
问题如果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一：
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。
图形转换上面的图形是一个柱形图，如果我们想用同样的数据，以饼图来展示，我们只需要将Chart.html代码中的“FCF_Column3D.swf”改成饼图的SWF文件就可以了，即“FCF_Pie3D.swf”。现在我们再刷新浏览器，看看效果：
图片1
够酷吧。
在接下来的系列文章里，我将介绍使用JavaScript来加载Flash。
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第一章--FusionCharts Free介绍
关键字: fusioncharts
FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。
不得不感叹技术发展的真快，99年的时候，flash刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。但现在flash几乎无所不能了，图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
FusionCharts free 目前最新版本是v2.1，主要做了以下改动：
增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档。
FusionCharts DOM更加容易地把图表加载到你的页面上。
修改了.Net的使用代码和文档。
增加了新的PHP API ,并修复了一些BUG。
修改了FusionCharts.js ，以便可以支持双引号。（那就是说以前不支持？）
增加了在FusionCharts使用UTF-8编码的示例。
FusionCharts到底能做什么呢？下面就给大家展示一下。
3D/2D 柱形图
图片1
曲线图
图片3
区域图
联合图
漏斗图
看了这么多漂亮的图形以后，是不是有点感到兴奋呢？如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。事实上，上面的图形，只是本道的截图，真正的flash图表，在显示时还有优美的动画。
好了，就不在多 说了，下篇文章，本道将介绍如何安装使用FusionCharts。
不得不感叹技术发展的真快，99年的时候，flash刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。但现在flash几乎无所不能了，图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
FusionCharts free 目前最新版本是v2.1，主要做了以下改动：
增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档。
FusionCharts DOM更加容易地把图表加载到你的页面上。
修改了.Net的使用代码和文档。
增加了新的PHP API ,并修复了一些BUG。
修改了FusionCharts.js ，以便可以支持双引号。（那就是说以前不支持？）
增加了在FusionCharts使用UTF-8编码的示例。
FusionCharts到底能做什么呢？下面就给大家展示一下。
3D/2D 柱形图
图片1
曲线图
图片3
区域图
联合图
漏斗图
看了这么多漂亮的图形以后，是不是有点感到兴奋呢？如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。事实上，上面的图形，只是本道的截图，真正的flash图表，在显示时还有优美的动画。
好了，就不在多 说了，下篇文章，本道将介绍如何安装使用FusionCharts。
2009
-
11
-
25
[AJava]FusionCharts Free中文开发指南[使用文档教程]第二章--FusionCharts Free安装
关键字: fusioncharts
本文将介绍FusionCharts Free V2.1的下载及安装。
下载你可以在下面的地址下载它。
免费漂亮的Flash图形报表-FusionCharts Free V2.1下载
文件不大，共4.22M。将FusionCharts Free（以下简称FCF）解压到任意一个目录后，点击目录下的index.html，就可以打开FCF的文档。
这份文档我们的网站上也有，地址是http://ajava.org/demo/fusionchartsfree/。
目录结构现在我们就来看看这个下载包里面都有些什么东西。
SWF文件（创建图形主要靠它们了）
所有的SWF文件（共22个）都在FusionChartsFree>Charts文件夹。如果你需要在你的web应用里创建图形，那么就把这些SWF文件都拷到你的应用下面。
FusionCharts JavaScript文件
FusionCharts JavaScript文件放在FusionChartsFree>JSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。
示例代码
所有的代码都放在FusionChartsFree>Code文件夹。
图形例子
我们创建了一些图形例子，放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它。
文档
文档就放在FusionChartsFree>Contents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。
安装了解了下载包的目录结构以后，我们再来看看如何安装FCF到web应用里。
只需要两个步骤即可完成安装。
1、在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。
2、把所有的SWF文件都拷贝到这个FusionCharts里。
这就完成安装了，不再需要其他多余的步骤。
当然，有些情况下，并不需要与服务器的交互（比如，你直接使用JavaScript来嵌入，而不用jsp或php。数据也是直接写死在你的 JavaScript代码里或xml文件里。），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如d:/test下。安装步骤和上面的安装 一样。
SWF接下来介绍SWF文件都分别对应哪种图形。
图形类型 文件名
Single Series Charts
Column 3D FCF_Column3D.swf
Column 2D FCF_Column2D.swf
Line 2D FCF_Line.swf
Area 2D FCF_Area2D.swf
Bar 2D FCF_Bar2D.swf
Pie 2D FCF_Pie2D.swf
Pie 3D FCF_Pie3D.swf
Doughnut 2D FCF_Doughnut2D.swf
Multi-series Charts
Multi-series Column 2D FCF_MSColumn2D.swf
Multi-series Column 3D FCF_MSColumn3D.swf
Multi-series Line 2D FCF_MSLine.swf
Multi-series Bar 2D FCF_MSBar2D.swf
Multi-series Area 2D FCF_MSArea2D.swf
Stacked Charts
Stacked Column 3D FCF_StackedColumn3D.swf
Stacked Column 2D FCF_StackedColumn2D.swf
Stacked Bar 2D FCF_StackedBar2D.swf
Stacked Area 2D FCF_StackedArea2D.swf
Combination Charts
Multi-series Column 3D + Line - Dual Y Axis FCF_MSColumn2DLineDY.swf
Multi-series Column 3D + Line - Dual Y Axis FCF_MSColumn3DLineDY.swf
Financial Charts
Candlestick Chart FCF_Candlestick.swf
Funnel Chart
Funnel Chart FCF_Funnel.swf
Gantt Chart
Gantt Chart FCF_Gantt.swf
FCF支持上面的22种图形，对于大部分人来说，都足够了。
好了，到现在为止还没有开始真正的编程，大家可能有点急了吧，下篇文章我们就来创建我们的第一个Flash图形报表。
下载你可以在下面的地址下载它。
免费漂亮的Flash图形报表-FusionCharts Free V2.1下载
文件不大，共4.22M。将FusionCharts Free（以下简称FCF）解压到任意一个目录后，点击目录下的index.html，就可以打开FCF的文档。
这份文档我们的网站上也有，地址是http://ajava.org/demo/fusionchartsfree/。
目录结构现在我们就来看看这个下载包里面都有些什么东西。
SWF文件（创建图形主要靠它们了）
所有的SWF文件（共22个）都在FusionChartsFree>Charts文件夹。如果你需要在你的web应用里创建图形，那么就把这些SWF文件都拷到你的应用下面。
FusionCharts JavaScript文件
FusionCharts JavaScript文件放在FusionChartsFree>JSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。
示例代码
所有的代码都放在FusionChartsFree>Code文件夹。
图形例子
我们创建了一些图形例子，放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它。
文档
文档就放在FusionChartsFree>Contents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。
安装了解了下载包的目录结构以后，我们再来看看如何安装FCF到web应用里。
只需要两个步骤即可完成安装。
1、在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。
2、把所有的SWF文件都拷贝到这个FusionCharts里。
这就完成安装了，不再需要其他多余的步骤。
当然，有些情况下，并不需要与服务器的交互（比如，你直接使用JavaScript来嵌入，而不用jsp或php。数据也是直接写死在你的 JavaScript代码里或xml文件里。），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如d:/test下。安装步骤和上面的安装 一样。
SWF接下来介绍SWF文件都分别对应哪种图形。
图形类型 文件名
Single Series Charts
Column 3D FCF_Column3D.swf
Column 2D FCF_Column2D.swf
Line 2D FCF_Line.swf
Area 2D FCF_Area2D.swf
Bar 2D FCF_Bar2D.swf
Pie 2D FCF_Pie2D.swf
Pie 3D FCF_Pie3D.swf
Doughnut 2D FCF_Doughnut2D.swf
Multi-series Charts
Multi-series Column 2D FCF_MSColumn2D.swf
Multi-series Column 3D FCF_MSColumn3D.swf
Multi-series Line 2D FCF_MSLine.swf
Multi-series Bar 2D FCF_MSBar2D.swf
Multi-series Area 2D FCF_MSArea2D.swf
Stacked Charts
Stacked Column 3D FCF_StackedColumn3D.swf
Stacked Column 2D FCF_StackedColumn2D.swf
Stacked Bar 2D FCF_StackedBar2D.swf
Stacked Area 2D FCF_StackedArea2D.swf
Combination Charts
Multi-series Column 3D + Line - Dual Y Axis FCF_MSColumn2DLineDY.swf
Multi-series Column 3D + Line - Dual Y Axis FCF_MSColumn3DLineDY.swf
Financial Charts
Candlestick Chart FCF_Candlestick.swf
Funnel Chart
Funnel Chart FCF_Funnel.swf
Gantt Chart
Gantt Chart FCF_Gantt.swf
FCF支持上面的22种图形，对于大部分人来说，都足够了。
好了，到现在为止还没有开始真正的编程，大家可能有点急了吧，下篇文章我们就来创建我们的第一个Flash图形报表。
1804
到【灌水乐园】发言
评论排行榜