hore_mt
hore_mt

树形结构解析

文章分类:Web前端 
// 图片透明

function setPng(img, w, h) {

	ua = window.navigator.userAgent.toLowerCase();

	if (!/msie/.test(ua))

		return;

	imgStyle = "display:inline-block;" + img.style.cssText;

	strNewHTML = "
			+ imgStyle + ";"

			+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"

			+ img.src + "', sizingMethod='scale');/">";

	img.outerHTML = strNewHTML;

}



图片添加onload时间,就OK 

							ο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;

}



  • 16:31
  • 浏览 (14)
  • 评论 (0)
  • 分类: web
2010 - 07 - 14
缩略显示

Jquery 应用收集

文章分类:Web前端
1.结合时间控件WdatePicker使用,根据radio值不同,控件显示不同到时间格式. 
$(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});

}



			月			年



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].url

2:tabs 绑定标签选中事件 
$("#tab_pay_plan").bind("click.tabs",function(){});



jquery/JS解析字符串成XML格式,执行操作,在IE8和chrome上正常 
var xmlstr="";


                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操作.

  • 09:49
  • 浏览 (43)
  • 评论 (0)
  • 分类: web
2010 - 02 - 22
缩略显示

原生AJAX 实现级联select

文章分类:Web前端
由于是在客户上的框架上做开发,因为是比较老的框架,ajax框架也是没有的,只有自己手写了.现在写起来还有点问题的.
主要还是封装获取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 改变时执行的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("");    

        for (int i = 0; i < sections.size(); i++) {

			Section s=(Section)sections.get(i);

			results.append("
			results.append(" id=/""+s.getSectionId()+"/"");

			results.append(" sectionName=/""+s.getSectionName()+"/"");

			results.append(" />");  

		}

        results.append("");

        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
		       	  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("您所请求的页面有异常。");

	    }

	 }

}
  • 15:15
  • 浏览 (180)
  • 评论 (0)
  • 分类: web
2010 - 02 - 05
缩略显示

JS知识

文章分类:Web前端
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超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用

document.documentElement来访问它，它就是整个节点树的根节点（ROOT）

子节点：

一般意义上的节点，根节点以下最大子节点就是主文档区了，要访问到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

  • 13:19
  • 浏览 (70)
  • 评论 (0)
  • 分类: web
2010 - 01 - 07
缩略显示

CSS知识

文章分类:Web前端
虽然我不是美工，也不专门去学CSS，但是项目中遇到的一些技巧还是记下来的好。。
  • 15:01
  • 浏览 (52)
  • 评论 (0)
  • 分类: web
2009 - 12 - 04
缩略显示

HTML

关键字: html
1.标签map-- 定义图像点击区域的集合
map 标签 map标签是成对出现的,以开始，结束
map标签必须配合area标签使用。
map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致。


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;


  • 14:54
  • 浏览 (39)
  • 评论 (0)
  • 分类: web
2009 - 11 - 30
缩略显示

JS函数收集--001

文章分类:Web前端
记录下开发过程中常用到的JS问题

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

}
  • 09:52
  • 浏览 (46)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第十四章--在JSP里使用FCF

关键字: fusioncharts
前面我们讲的例子里，都是采用HTML或JavaScript来显示图形，这是一种最基本的使用方法。FCF还提供了一些其他的方法来显示图形，有 PHP、ASP、JSP等等。不过，有点要说明的是，这些方法其实都是基本使用方法的一种变形，它们最终其实都是在页面上输出HTML或 JavaScript。因此，如果你觉得采用HTML或JavaScript就足够了，那就不需要阅读本章了。

我们来看个例子吧。
这是XML数据代码：


这个是JSP代码： 


   

       

        FusionCharts Free - Simple Column 3D Chart   

           

       

       

        
   

            
FusionCharts Free Examples
   

            
Basic example using pre-built Data.xml
   

            <%    


            //Create the chart - Column 3D Chart with data from Data/Data.xml    

            %>     

                 

                     

                     

                     

                     

                     

                     

                     

               


            
   

            
   

            Unable to see the chart    

            above?   

            
« Back to list of examples


我们可以看到，上例中采用了jsp的include标签，包含了一个叫FusionChartsHTMLRenderer.jsp的JSP页面， 它接受一些参数，用来加载数据或控制图形，debugMode必须是flase，因为在FCF里是没有调试功能的。这个JSP页面最终输出的是一段采用 HTML来加载图形的代码。它就在下载包 > Code > JSP > Includes文件夹里。

还有另外一个JSP--FusionChartsRenderer.jsp，它输出的是一段采用JavaScript来加载图形的代码。下面是它的使用代码： 

   

       

        FusionCharts Free - Simple Column 3D Chart   

           

           

       

       

        
   

            
FusionCharts Free Examples
   

            
Embedding chart using FusionCharts JavaScript class and using dataURL method.
   

            <%    


            //Create the chart - Column 3D Chart with data from Data/Data.xml    


            %>     

                 

                     

                     

                     

                     

                     

                   

                     

                   

               

            
   

            
   

            Unable to see the chart above?
« Back to list of             examples
  

debugMode和registerWithJS必须是flase，因为在FCF里是没有这两个功能的。

上面两个页面，显示的图形是一样的：


图片1

结束语关于FCF的使用，到这里基本就结束了，大家在阅读练习的过程中，如果发现文章有什么错误，或者是你遇到了一些问题，都可以和我联系，联系方式是：QQ:634369863。FCF论坛：AJava Ask。此教程的官方网站是AJava。

  • 16:05
  • 浏览 (589)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第十三章--间断数据的处理

关键字: fusioncharts
有时候我们的数据并不是连续的，例如我们有一个反映每个月销售额的图形，然而，五月和六月的数据我们缺失了，像这种情况我们该如何处理呢？
FCF早就想到这个问题了，我们看看下面的代码：


我们看到，上面五月和六月的数据里，并没有value这个属性。
如果把这样的数据放到一个柱状图里，效果如下：


图片1



在五月和六月那里没有柱子。这就是我们想要的效果。

如果把这样的数据放到一个曲线图里，效果如下：


图片1


同样的，五月和六月那里没有线段，它是缺失的。

如果你想连五月和六月的标签都不显示，你可以这样：

当然，你还可以干脆连都不要。不过那样会让看图的人容易误解，因为人们一般都会以为是按顺序来排列月份的。

多系列的图形也可以放置这样的断点数据。看下面的图：


上图的XML数据如下： 



lineThickness='1' animation='1' hoverCapSepChar=' ' anchorScale='0' showNames='1'   

showValues='0' numVDivLines='12' anchorscale='0' rotateNames='1'>   

      

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

      

   
   yaxismaxvalue='100' anchorAlpha='0'>   

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

         

      

   
   yaxismaxvalue='100' anchorAlpha='0'>


在category 元素里有个showName属性，当值为1时，就会显示；当值为0时，就不显示，哪怕给它提供了相应的数据。上面代码虽然有很多category，但是只有9个值为1的，所以图形里只显示了9个。

再看看dataset里有很多，这就是没有数据。所以在图里我们看到了很多的断点。
  • 16:00
  • 浏览 (430)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第十二章--FCF中的特殊字符

关键字: fusioncharts
在FCF里，如果要在图形里用到一些特殊的字符，你就要对它进行编码，否则就无法显示。
欧元符号在FCF里显示“€”，你需要用“%80”来替换它。如下：



上面的代码会在数字前面都加上“€”。

英镑符号在FCF里显示“￡”，你需要用“%A3”来替换它。如下：


上面的代码会在数字前面都加上“￡”。

人民币符号在FCF里显示“￥”，你需要用“%A5”来替换它。如下：




上面的代码会在数字前面都加上“￥”。

分符号在FCF里显示“￠”，你需要用“%A2”来替换它。如下：



上面的代码会在数字后面都加上“￠”。

百分号符号在FCF里显示“%”，你需要用“%25”来替换它。如下：



上面的代码会在数字后面都加上“%”。

&符号在FCF里显示“&”，你需要用“&”来替换它。如下：


上面的代码标题显示为“Total of 2003 & 2004”。

>符号在FCF里显示“>”，你需要用“>”来替换它。如下：



上面的代码最后一个数字显示为“>10”。
如果要显示“<”，你可能以为用“<”就可以了，事实是不可能的。我还没试验出怎么才能显示“<”，也许没有这个必要。

单引号符号在FCF里显示“'”，你需要用“'”来替换它。如下：


上面的代码显示为“John's Count”。
如果你想要显示双引号，直接使用就可以了，前提是你的属性值是用单引号括起来的。如果你的属性值是用双引号括起来的，你要显示单引号，也可以直接使用，而不必用“'”来替换它。

  • 15:52
  • 浏览 (485)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第十一章--FCF中的基本数字格式

关键字: fusioncharts
在我们的报表里，经常要对数值进行一些格式化，如小数位，千分位等等。这在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里，一些特殊的编码都需要经过编码。下一章我们会详细介绍特殊字符。
  • 15:51
  • 浏览 (522)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第十章--FCF中的下钻

关键字: fusioncharts
在我们开发图形报表时，你可能会遇到这样的需求：用户要求点击柱状图的某根柱子，可查看它的详细数据。其他的一些基于java的图形报表组件，如 jfreechart，也可以实现加连接的功能，但是使用起来还是有点麻烦的。其实它不光是加连接麻烦，正个使用起来都很麻烦，需要你在后台编写大量的代 码。通过前面的章节，你应该知道，FCF的使用非常简单，你只需要关注你的数据如何产生就可以了。至于如何产生图形，并不需要你编一行代码。加连接也是如 此。
FCF支持三种类型的连接：
1、普通的超链接，在同一个窗口打开新的页面。
2、普通的超链接，在新窗口打开新的页面。
3、JavaScript连接。

普通的超链接
我们先来看看第一种情况。
想要在FCF图形里加连接，你只需要在数据集里加上一个link属性即可。如下：


我们发现URL是经过了编码的。是的，因为你的连接里可能会含有“?”，“&”等字符，所以需要编码。FCF在载入这个连接时，会对它进行解码，解码后上例中的连接就是“ShowDetails.asp?Month=Jan”。

我们看一个完整的例子。 


 
 xAxisName='Month' yAxisName='Sales' numberPrefix='$'>


如果把上面的数据用柱状图来显示，结果如下：


图片1


当我们把鼠标移到每个柱子上时，鼠标会变成连接样式，点击它，就会在新的窗口里打开相应的页面。

新窗口超链接
如果你想在一个新的窗口打开页面，只需要在连接的前面加上“n-”，就像下面的代码一样： 


xAxisName='Month' yAxisName='Sales' numberPrefix='$'>



JavaScript连接
我们还可以加上JavaScript连接，在连接里，你可以调用任何在本页可以调用到的JavaScript函数。如下：


下图是一个点击连接后弹出提示框的例子。 

http://ajava.org/uploads/090115/1_172017_1.jpg
  • 15:46
  • 浏览 (438)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第九章--动态改变图形的类型和数据

关键字: fusioncharts
在前面的章节里，我们已经了解了图形的基本使用方法以及图形XML，现在我们已经有能力做出基本的图形了，如果你现在就把它应用到你的项目里，我认为没有任何问题，而且我也相信你还能举一反三地，发展出一些“新”的用法。
那我们就开始吧。


动态改变图形的类型
在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。举个例子来说，在一个页面上， 显示了一个月销售额的柱状图，但用户要求还可以查看月销售额的饼图，区域图。要实现这个需求，一般的做法是，再做两个页面，一个显示饼图，一个显示区域 图，用户想看这两个图，点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术，来实现页面无刷新，这样用户的体验会更好一些。只是程序 员累一点而已。
难道我们一定要这么累吗？不！其实我们可以有更好的办法，前提是你采用了FCF作为你的报表解决方案。
那么，在FCF里，是怎么实现上面的需求的呢？简单点说，思路是这样的：
1、使用JavaScript加载第一个图形（如柱状图），至于是用dataXML方法，还是dataURL方法，都可以。
2、当需要改变图形类型（如改成饼图）时，我们再创建一个新的FusionCharts类实例（它的SWF文件是饼图），把它render到原来的DIV。
就是这么简单。

我们来看看代码吧。 

       

          

             

             

          

       

   
       

   FusionCharts        

   
       

          


   
       

   Show as:


上面的代码非常浅显，就不做解释了。


动态改变图形的数据我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。
那么为什么还要单独来讲解这个呢？因为FCF给我们提供了一个更简单的方法，那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid，第二个参数是XML数据字符。
来看看下面的代码。 


   

      

      FusionCharts Free & JavaScript - Updating chart using setDataXML() Method     

         

         

      

      

      
   

         FusionCharts


当我们单击”改变数据“按钮后，会调用updateChart()方法，它会使用新的数据来重新构建图形。

这种方案看起来，好像是比较好。然而，在前面我们说了，使用dataXML方法加载数据时，不能含有中文字符，同理，使用 updateChartXML方法，也不能有中文字符。如果你要使用中文，还是用第一种方法吧。你可能会想，既然有updateChartXML方法，那 是不是有updateChartURL方法呢？我们用它不就可以了吗？是的，是有这个方法，不过，FusionCharts Free版本里没有，只有FusionCharts版本里有。想用吗？拿钱来！
下章我们来讲讲FCF的下钻图形，听上去很专业，其实就是图形的连接，包括超连接，JavaScript。

  • 15:44
  • 浏览 (1014)
  • 评论 (0)
  • 分类: web
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代码如下： 


  xAxisName='Month' showValues='0' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70'     

  showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'     

  alternateHGridColor='f8f8f8' alternateHGridAlpha='60' SYAxisMaxValue='750'     

 >     

      

         

         

         

         

         

         

         

         

         

         

         

         

      


      

         

         

         

         

         

         

         

         

         

         

         

         

      


      

         

         

         

         

         

         

         

         

         

         

         

         

      


   
    anchorRadius='3' anchorBorderColor='009900' >


简单解释
这个组合图的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文件的对应关系，请参见
  • 15:42
  • 浏览 (993)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第七章--FusionCharts Free和XML

关键字: fusioncharts
FusionCharts使用XML来创建和控制图形。

数据类型
在FCF里，一共有四种数据类型。
Boolean - 它的值为0或1，1表示true，0表示false。例如。
Number - 它的值应该是一个数值。例如 。
String - 它的值是一个字符串。例如 。
Hex Color Code - 它表示一个16进制的颜色，不需要用“#”。例如。
每个图形都有很多属性，我们都可以通过XML对它进行设置，但是，我们并不需要对每一个属性都进行设置，因为它们都有一个默认值，如果我们没有设置，FCF会使用默认值来替代。

FCF里有几种类型的XML结构：


单系列图形
单系列图形是指只有一个数据集的图形。例如，我们的第一个例子，每月销售情况 ，就是一个单系列图形（我们只有一年的数据）。我们并没有对数据进行比较，例如，比较两年的每月销售情况。
我们看看下面的例子。


图片1 




numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'     

divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8'   

  alternateHGridAlpha='60' >

上面的代码里多了一些我们没接触过的属性，没关系，在图形XML参考一章我们将详细介绍所有的图形可用的属性。
下面进行一下简单的解释
元素是所有FCF XML文档的主元素。它描述数据的开始和结束。它还有一些属性可以控制图形。这些属性我们在图形XML参考一章会讲到。
元素是的子元素，它描述一个数据集，这个数据集决定了图形上的数据。一个典型的元素看起来就像这样：


元素，它可以在图形上画出一条趋势线。例如，下面的代码里，我们在26000这个值画出了一条线，用来表示月平均销售额。

多系列图形
多系列图形被用来比较两个或更多的数据集。
我们看看下面的代码。


图片1 



  showValues='0' numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70'     

  showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'     

  alternateHGridColor='f8f8f8' alternateHGridAlpha='60' >
  

我们发现，上面多了一个 元素，它包含很多的子元素，如


每个就表示X轴上的一个名称。
上面还有两个元素，一个用来表示2006年的数据，一个表示2005年。每个则表示图形上的一个数据。
注意的子元素的数量应该和子元素的一致。
下一章我们来看看组合图的XML。

  • 15:40
  • 浏览 (889)
  • 评论 (0)
  • 分类: web
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。

  • 15:38
  • 浏览 (1068)
  • 评论 (0)
  • 分类: web
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 的值是这样的一种形式：
在EMBED 标记里，是这样的：
而原来我们放到FlashVars的两个参数--chartWidth，chartHeight，则被放到了SWF文件地址的后面。

使用JavaScript和dataXML
看下面的代码。 


   

   

      

     

   


   
The chart will appear within this DIV. This text will be replaced by the chart.

原来我们调用的是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()。

  • 15:34
  • 浏览 (789)
  • 评论 (0)
  • 分类: web
2009 - 11 - 25
缩略显示

[AJava]FusionCharts Free中文开发指南[使用文档教程]第四章--FusionCharts Free使用JavaScript加载图形

关键字: fusioncharts
在上篇文章里，我们做出了第一个图形报表，我们是直接在HTML里使用和标记来加载图形的。 


   

...     

      

         

         

         

         

      

...
实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。

使用JS加载
这个JS类文件就在FusionChartsFree>JSClass文件夹下，我们把它拷贝到c:/FusionCharts/FusionCharts下面。
现在，我们把原来的Chart.html复制一份，命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，
下面就是JSChart.html的代码。 

   

       

           

         

   

    
图形将出现这个DIV里，到时这里的字将被图形替代。



我们对上面的代码进行以下解释。
首先，我们用下面的语句来加载FusionCharts.js文件。



然后，我们定义了一个DIV，它还有个id。 


图形将出现这个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加载图形，更方便，更直观。

多图形
有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。
怎么加载多个图形呢？很简单，看下面。 

   

多图形     

      

   

   

   
First Chart Container Pie 3D
   

      


  
Second Chart Container Column 3D
   

      


  
Third Chart Container Line 2D
   

      


  
Fourth Chart Container Area 2D


仔细对比上面的四个图形代码，其实就是div的id，FusionCharts对象的名称,图形的id，还有图形的SWF地址这些地方发生了变化。最后的效果如下：

  • 15:32
  • 浏览 (691)
  • 评论 (0)
  • 分类: web
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文件夹下。这个文件的内容如下：

上面的代码里，有一个叫的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。

创建包含图形的HTML文件
每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:/FusionCharts/MyFirstChart/Chart.html文件里。 


   

      

      My First FusionCharts


上面的代码，其实就是一个显示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。


  • 15:30
  • 浏览 (902)
  • 评论 (0)
  • 分类: web
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。
  • 15:28
  • 浏览 (789)
  • 评论 (0)
  • 分类: web
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图形报表。


  • 15:27
  • 浏览 (1052)
  • 评论 (0)
  • 分类: web
iehyou
  • 浏览: 17649 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
  • 详细资料 留言簿
搜索本博客
最近访客 >>更多访客
lzs123cnnic
zxy202408
www2510
xiaoding729
博客分类
  • 全部博客 (59)
  • SPRING (0)
  • J2EE (22)
  • Oracle (9)
  • web (22)
  • WINDOWS (1)
  • various (2)
  • LINUX (1)
  • PHP (1)
  • wordpress (1)
其他分类
  • 我的收藏 (41)
  • 我的论坛主题贴 (2)
  • 我的所有论坛贴 (45)
  • 我的精华良好贴 (0)
  • 我解决的问题 (1)
最近加入圈子
存档
  • 2010-12 (2)
  • 2010-11 (2)
  • 2010-07 (1)
  • 更多存档...
评论排行榜
  • 找工作中...放上简历,求推荐
  • struts2 内建效验器
  • Servlet 接受解析HTTP请求XML数据,返回XM ...
  • 基于wp_poll开发满意度调查
  • 记录开发过程用的代码段001--POI生成excel ...
  • Rss
  • Rss_google

你可能感兴趣的:(树形结构解析)

  • Python教程：一文了解使用Python处理XPath 旦莫 Python进阶python开发语言
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
  • python八股文面试题分享及解析(1) Shawn________ python
    #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
  • 【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS算法数据结构c++
    题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（4) 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
  • Python爬虫解析工具之xpath使用详解 eqa11 python爬虫开发语言
    文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
  • 18、架构-可观测性之聚合度量 大树~~ 架构javapython后端架构
    聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标
  • 如何选择最适合你的项目研发管理软件？TAPD卓越版全面解析 北京云巴巴信息技术有限公司 产品经理需求分析
    在当今快速发展的科技时代，项目研发管理软件已成为企业不可或缺的重要工具。面对市场上琳琅满目的产品，如何选择一款适合自己团队的项目研发管理软件呢？本文将围绕项目研发管理软件的选择标准，重点介绍TAPD卓越版的特点、优势以及使用体验，让你更好地理解和选择适合自己的项目研发管理软件。项目研发管理软件的选择标准在选择项目研发管理软件时，我们需要考虑以下几个方面的因素：功能全面性：软件是否覆盖了从需求管理、
  • 剧本杀《鲸鱼马戏团》剧本杀剧透+真相答案复盘解析攻略 VX搜_奶茶剧本杀
    本文为剧本杀《鲸鱼马戏团》剧本杀测评+部分真相复盘，获取完整真相复盘只需两步：①、关注微信公众号【奶茶剧本杀】→②、回复剧本杀《鲸鱼马戏团》即可获取查看剧本杀《鲸鱼马戏团》剧本杀真相答案复盘+凶手剧透：以下是玩家评测+部分关键证据，凶手，时间线，复盘解析，推理逻辑--------------------------------------------------------------------
  • ArrayList 源码解析 程序猿进阶 Java基础ArrayListListjava面试性能优化架构设计idea
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
  • Kafka是如何保证数据的安全性、可靠性和分区的 喜欢猪猪 kafka分布式
    Kafka作为一个高性能、可扩展的分布式流处理平台，通过多种机制来确保数据的安全性、可靠性和分区的有效管理。以下是关于Kafka如何保证数据安全性、可靠性和分区的详细解析：一、数据安全性SSL/TLS加密：Kafka支持SSL/TLS协议，通过配置SSL证书和密钥来加密数据传输，确保数据在传输过程中不会被窃取或篡改。这一机制有效防止了中间人攻击，保护了数据的安全性。SASL认证：Kafka支持多种
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • 光盘文件系统 (iso9660) 格式解析 穷人小水滴 光盘文件系统iso9660denoGNU/Linuxjavascript
    越简单的系统,越可靠,越不容易出问题.光盘文件系统(iso9660)十分简单,只需不到200行代码,即可实现定位读取其中的文件.参考资料:https://wiki.osdev.org/ISO_9660相关文章:《光盘防水嘛?DVD+R刻录光盘泡水实验》https://blog.csdn.net/secext2022/article/details/140583910《光驱的内部结构及日常使用》ht
  • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
  • 崩坏星穹铁道哪个角色值得培养 崩坏星穹铁道新手角色优先级教学 会飞滴鱼儿
    崩坏星穹铁道新手角色培养攻略：哪些角色值得投资？在《崩坏星穹铁道》中，角色的强度和培养一直是玩家们关心的焦点。要想体验更爽快的游戏过程，选对角色至关重要。那么，哪些角色值得投资培养呢?本篇教学文章将针对新手玩家，从T0到T1强度的角色中为你做出详尽解析。游戏豹官网现在的手游平台很多，但是在游戏界有这么一个传说：“喜欢肝的玩家不如氪金玩家，氪金玩家不如内部福利玩家”，这就是游戏界可悲的生物链，很多平
  • WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Javajava爬虫开发语言
    文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
  • 【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】 汉子萌萌哒 CCFnoi算法数据结构c++
    一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
  • 绝招曝光！3小时高效利用ChatGPT写出精彩论文 kkai人工智能 chatgpt人工智能ai学习媒体
    在这份指南中，我将深入解析如何利用ChatGPT4.0的高级功能，指导整个学术研究和写作过程。从初步探索研究主题，到撰写结构严谨的学术论文，我将一步步展示如何在每个环节中有效运用ChatGPT。如果您还未使用PLUS版本，可以参考相关教程。**初步探索与主题的确定**起初，我处于庞大的知识领域中，寻找一个可深入研究的领域。ChatGPT如同灯塔，通过深入分析最新研究趋势和领域热点，帮助我在广阔的学
  • ERP企业资源规划系统 点滴~ 教育电商
    ERP企业资源规划系统ERP（EnterpriseResourcePlanning）企业资源规划系统是一种综合性的管理信息系统，旨在通过信息技术手段实现对企业内部资源的全面规划、管理和控制。以下是对ERP企业资源规划系统的详细解析：一、定义与核心思想ERP系统建立在信息技术基础上，以系统化的管理思想，为企业决策层及员工提供决策运行手段的管理平台。它不仅仅是一个软件，更重要的是一个管理思想，实现了企
  • 使用由 Python 编写的 lxml 实现高性能 XML 解析 hunyxv python笔记pythonxml
    转载自：文章lxml简介Python从来不出现XML库短缺的情况。从2.0版本开始，它就附带了xml.dom.minidom和相关的pulldom以及SimpleAPIforXML(SAX)模块。从2.4开始，它附带了流行的ElementTreeAPI。此外，很多第三方库可以提供更高级别的或更具有python风格的接口。尽管任何XML库都足够处理简单的DocumentObjectModel(DOM
  • 每日OJ_牛客_马戏团（模拟最长上升子序列） GR鲸鱼 c++算法开发语言牛客数据结构
    目录牛客_马戏团（模拟最长上升子序列）解析代码牛客_马戏团（模拟最长上升子序列）马戏团__牛客网搜狐员工小王最近利用假期在外地旅游，在某个小镇碰到一个马戏团表演，精彩的表演结束后发现团长正和大伙在帐篷前激烈讨论，小王打听了下了解到，马戏团正打算出一个新节目“最高罗汉塔”，即马戏团员叠罗汉表演。考虑到安全因素，要求叠罗汉过程中，站在某个人肩上的人应该既比自己矮又比自己瘦，或相等。团长想要本次节目中的
  • APQP，ASPICE，敏捷，功能安全，预期安全，这些汽车行业的一堆标准 二大宝贝 安全架构
    前言APQP,ASPICE,敏捷，功能安全，预期安全，PMP，PRICE2汽车行业的有这样一堆标准。我是半路出家来到汽车行业做项目经理的，对几个标准的感觉是，看了文档和各种解析之后还是一头雾水，不知道到底说了个啥，别人问我还是一脸懵逼。APQP（TS16949的最重要工具），ASPICE（软件）这些是质量标准，是优化整个公司体系的，但这套体系对项目管理有要求；敏捷，PMP这些是项目管理的标准；项目
  • Shell脚本中sed使用 jcrhl321 linux
    目录一、sed编辑器1、sed概述2、sed的工作流程3、sed命令的常见格式4、sed命令常用操作二、sed常用命令使用1、sed打印2、sed删除3、sed替换4、sed插入与增加4、sed剪切粘贴与复制粘贴一、sed编辑器sed（StreamEDitor）是一个强大而简单的文本解析转换工具，可以读取文本，并根据指定的条件对文本内容进行编辑（删除、替换、添加、移动等），最后输出所有行或者仅输出
  • “无”，有大用 我若盛开
    2021/7/7日更36/100网图，侵删《道德经》节选解析“三十辐，共一毂；当其无，有车之用。埏埴以为器，当其无，有器之用。凿户牖以为室，当其无，有室之用。故有之以为利，无之以为用。”译文：三十根辐条汇集到一根毂的孔洞当中，有了车毂中空的地方，才有车的作用。揉和陶土做成器皿，有了器具中空的地方，才有器皿的作用。开凿门窗建造房屋，有了门窗四壁内的空虚部分，才有房屋的作用。所以，“有”只是提供了条件
  • 打造专业投票评选平台：创建大型活动的完整指南 口碑信息传播者
    在数字化时代，打造专业的投票评选平台成为举办大型活动的不可或缺的一环。本指南将深入探讨如何创建一个高效、安全、用户友好的投票平台，旨在帮助您成功举办大型投票评选活动。从平台的设计和功能规划到活动的推广和安全性保障，每个步骤都将得到详细解析。第一部分：构建投票平台的基础在创建投票平台之前，首先需要明确平台的基础构建要素：1.**投票平台的定义和关键功能：**确定您的平台将提供的服务和功能，包括投票方
  • Istio pilot-discovery服务发现源码解析（1.13版本） xidianjiapei001 #Istioistio云原生服务发现
    Istiopilot-discovery服务发现介绍工作机制初始化初始化Config控制器初始化Service控制器controller初始化NamespaceServiceNodePodPilotDiscovery各组件启动流程DiscoveryServer接收Envoy的gRPC连接请求流程Config变化后向Envoy推送更新的流程总结参考介绍IstioPilot的代码分为Pilot-Dis
  • 剧本杀《暗黑者·七宗欲》复盘详细解析+凶手角色剧透答案真相 VX搜_小燕子复盘
    为了你获得更好的游戏体验，本文仅显示《暗黑者·七宗欲》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：集美复盘】②回复【暗黑者·七宗欲】即可查看获取哦﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎1、剧本杀《暗黑者·七宗欲》角色介绍朱思俊沙害杜光荣的手法：接到杜光荣的电话之后，朱思俊约对方在地下室见面细聊。朱思俊出门时携带了老冰棍（放在保温杯中）、白砂糖、鱼线
  • 【星盘解析】水星和火星之间的四种相位，你的性格被哪种影响占据了？ 匡苪祯库
    水星和火星之间的四种相位，分别是合、拱、刑和冲。这些相位代表了不同的状态和影响，让我们一一来看看。首先合相，这代表着水星和火星之间的能量是相互协作的。这种相位通常会给人带来一些积极的影响，如思维敏捷、行动力强和创造力强。盘主可能会感到自己有很强的逻辑思维和决策能力，能够在事业和生活中取得成功。同时，这种相位也可能会让盘主变得过于急躁和焦虑，需要注意放松心态和调整自己的情绪。其次是拱相，这代表着水星
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • 阿里巴巴商品搜索API返回值实战解析 weixin_43841111 apijava前端javascript
    在解析阿里巴巴中国站商品搜索API返回值并进行实战时，可以从以下几个方面入手：一、了解API返回值的结构基本信息返回值通常包含商品的标题、价格、库存、图片链接等基本信息。这些信息对于了解商品的概况非常重要。例如，商品标题可以让你快速了解商品的名称和特点，价格信息可以帮助你进行价格比较和成本核算。详细描述可能包括商品的详细描述、规格参数、使用方法等。这些信息对于深入了解商品的特性和功能非常有帮助。比
  • 2024年华为杯数学建模研赛C题思路代码+论文助攻 DS数模 2024华为杯数学建模华为2024华为杯2024研究生数学建模2024研赛
    2024年华为杯研究生数学建模竞赛（以下简研赛）将于9月21日上午8时正式开始。下文包含：2024研赛思路解析、研赛参赛时间及规则信息说明、好用的数模技巧及如何备战数学建模竞赛C君将会第一时间发布选题建议、所有题目的思路解析、相关代码、参考文献、参考论文等多项资料，帮助大家取得好成绩。2024年研赛将于9月21日上午8时正式开始这里有些资料，大家可以看看：【2024最全国赛研赛数模资料包】C君珍贵
  • tomcat基础与部署发布 暗黑小菠萝 Tomcat java web
    从51cto搬家了，以后会更新在这里方便自己查看。 做项目一直用tomcat，都是配置到eclipse中使用，这几天有时间整理一下使用心得，有一些自己配置遇到的细节问题。 Tomcat：一个Servlets和JSP页面的容器，以提供网站服务。 一、Tomcat安装     安装方式：①运行.exe安装包      &n
  • 网站架构发展的过程 ayaoxinchao 数据库应用服务器网站架构
    1.初始阶段网站架构：应用程序、数据库、文件等资源在同一个服务器上 2.应用服务和数据服务分离：应用服务器、数据库服务器、文件服务器 3.使用缓存改善网站性能：为应用服务器提供本地缓存，但受限于应用服务器的内存容量，可以使用专门的缓存服务器，提供分布式缓存服务器架构 4.使用应用服务器集群改善网站的并发处理能力：使用负载均衡调度服务器，将来自客户端浏览器的访问请求分发到应用服务器集群中的任何
  • [信息与安全]数据库的备份问题 comsci 数据库
          如果你们建设的信息系统是采用中心-分支的模式,那么这里有一个问题   如果你的数据来自中心数据库,那么中心数据库如果出现故障,你的分支机构的数据如何保证安全呢?    是否应该在这种信息系统结构的基础上进行改造,容许分支机构的信息系统也备份一个中心数据库的文件呢?  &n
  • 使用maven tomcat plugin插件debug关联源代码 商人shang mavendebug查看源码tomcat-plugin
    *首先需要配置好'''maven-tomcat7-plugin'''，参见[[Maven开发Web项目]]的'''Tomcat'''部分。 *配置好后，在[[Eclipse]]中打开'''Debug Configurations'''界面，在'''Maven Build'''项下新建当前工程的调试。在'''Main'''选项卡中点击'''Browse Workspace...'''选择需要开发的
  • 大访问量高并发 oloz 大访问量高并发
    大访问量高并发的网站主要压力还是在于数据库的操作上，尽量避免频繁的请求数据库。下面简 要列出几点解决方案： 01、优化你的代码和查询语句，合理使用索引 02、使用缓存技术例如memcache、ecache将不经常变化的数据放入缓存之中 03、采用服务器集群、负载均衡分担大访问量高并发压力 04、数据读写分离 05、合理选用框架，合理架构(推荐分布式架构)。
  • cache 服务器 小猪猪08 cache
    Cache   即高速缓存.那么cache是怎么样提高系统性能与运行速度呢？是不是在任何情况下用cache都能提高性能？是不是cache用的越多就越好呢？我在近期开发的项目中有所体会，写下来当作总结也希望能跟大家一起探讨探讨，有错误的地方希望大家批评指正。 　　1.Cache   是怎么样工作的? 　　Cache   是分配在服务器上
  • mysql存储过程 香水浓 mysql
    Description:插入大量测试数据 use xmpl; drop procedure if exists mockup_test_data_sp; create procedure mockup_test_data_sp( in number_of_records int ) begin declare cnt int; declare name varch
  • CSS的class、id、css文件名的常用命名规则 agevs JavaScriptUI框架Ajaxcss
      CSS的class、id、css文件名的常用命名规则     (一)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right
  • 全局数据源 AILIKES javatomcatmysqljdbcJNDI
    实验目的：为了研究两个项目同时访问一个全局数据源的时候是创建了一个数据源对象，还是创建了两个数据源对象。 1：将diuid和mysql驱动包（druid-1.0.2.jar和mysql-connector-java-5.1.15.jar）copy至%TOMCAT_HOME%/lib下；2：配置数据源，将JNDI在%TOMCAT_HOME%/conf/context.xml中配置好,格式如下：&l
  • MYSQL的随机查询的实现方法 baalwolf mysql
    MYSQL的随机抽取实现方法。举个例子，要从tablename表中随机提取一条记录，大家一般的写法就是：SELECT * FROM tablename ORDER BY RAND() LIMIT 1。但是，后来我查了一下MYSQL的官方手册，里面针对RAND()的提示大概意思就是，在ORDER BY从句里面不能使用RAND()函数，因为这样会导致数据列被多次扫描。但是在MYSQL 3.23版本中，
  • JAVA的getBytes()方法 bijian1013 javaeclipseunixOS
        在Java中，String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组。这个表示在不同OS下，返回的东西不一样！      String.getBytes(String decode)方法会根据指定的decode编码返回某字符串在该编码下的byte数组表示，如： byte[] b_gbk = "
  • AngularJS中操作Cookies bijian1013 JavaScriptAngularJSCookies
            如果你的应用足够大、足够复杂，那么你很快就会遇到这样一咱种情况：你需要在客户端存储一些状态信息，这些状态信息是跨session(会话)的。你可能还记得利用document.cookie接口直接操作纯文本cookie的痛苦经历。         幸运的是，这种方式已经一去不复返了，在所有现代浏览器中几乎
  • [Maven学习笔记五]Maven聚合和继承特性 bit1129 maven
    Maven聚合   在实际的项目中，一个项目通常会划分为多个模块，为了说明问题，以用户登陆这个小web应用为例。通常一个web应用分为三个模块： 1. 模型和数据持久化层user-core, 2. 业务逻辑层user-service以 3. web展现层user-web， user-service依赖于user-core user-web依赖于user-core和use
  • 【JVM七】JVM知识点总结 bit1129 jvm
      1. JVM运行模式 1.1 JVM运行时分为-server和-client两种模式，在32位机器上只有client模式的JVM。通常，64位的JVM默认都是使用server模式，因为server模式的JVM虽然启动慢点，但是，在运行过程，JVM会尽可能的进行优化 1.2 JVM分为三种字节码解释执行方式：mixed mode, interpret mode以及compiler
  • linux下查看nginx、apache、mysql、php的编译参数 ronin47
    在linux平台下的应用，最流行的莫过于nginx、apache、mysql、php几个。而这几个常用的应用，在手工编译完以后，在其他一些情况下（如：新增模块），往往想要查看当初都使用了那些参数进行的编译。这时候就可以利用以下方法查看。 1、nginx [root@361way ~]# /App/nginx/sbin/nginx -V nginx: nginx version: nginx/
  • unity中运用Resources.Load的方法？ brotherlamp unity视频unity资料unity自学unityunity教程
    问：unity中运用Resources.Load的方法？ 答：Resources.Load是unity本地动态加载资本所用的方法,也即是你想动态加载的时分才用到它,比方枪弹,特效,某些实时替换的图像什么的,主张此文件夹不要放太多东西,在打包的时分,它会独自把里边的一切东西都会集打包到一同,不论里边有没有你用的东西,所以大多数资本应该是自个建文件放置 1、unity实时替换的物体即是依据环境条件
  • 线段树-入门 bylijinnan java算法线段树
    /** * 线段树入门 * 问题：已知线段[2,5] [4,6] [0,7]；求点2,4,7分别出现了多少次 * 以下代码建立的线段树用链表来保存，且树的叶子结点类似[i,i] * * 参考链接：http://hi.baidu.com/semluhiigubbqvq/item/be736a33a8864789f4e4ad18 * @author lijinna
  • 全选与反选 chicony 全选
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title>
  • vim一些简单记录 chenchao051 vim
    mac在/usr/share/vim/vimrc linux在/etc/vimrc   1、问：后退键不能删除数据，不能往后退怎么办？       答：在vimrc中加入set backspace=2   2、问：如何控制tab键的缩进？       答：在vimrc中加入set tabstop=4 (任何
  • Sublime Text 快捷键 daizj 快捷键sublime
    [size=large][/size]Sublime Text快捷键：Ctrl+Shift+P：打开命令面板Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次增加选择下一行Ctrl+Shift+L：
  • php 引用(&)详解 dcj3sjt126com PHP
    在PHP 中引用的意思是：不同的名字访问同一个变量内容. 与Ｃ语言中的指针是有差别的．Ｃ语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容  复制代码代码如下: <?  $a="ABC";  $b =&$a;  echo
  • SVN中trunk,branches,tags用法详解 dcj3sjt126com SVN
    Subversion有一个很标准的目录结构，是这样的。比如项目是proj，svn地址为svn://proj/，那么标准的svn布局是svn://proj/|+-trunk+-branches+-tags这是一个标准的布局，trunk为主开发目录，branches为分支开发目录，tags为tag存档目录（不允许修改）。但是具体这几个目录应该如何使用，svn并没有明确的规范，更多的还是用户自己的习惯。
  • 对软件设计的思考 e200702084 设计模式数据结构算法ssh活动
    软件设计的宏观与微观    软件开发是一种高智商的开发活动。一个优秀的软件设计人员不仅要从宏观上把握软件之间的开发，也要从微观上把握软件之间的开发。宏观上，可以应用面向对象设计，采用流行的SSH架构，采用web层，业务逻辑层，持久层分层架构。采用设计模式提供系统的健壮性和可维护性。微观上，对于一个类，甚至方法的调用，从计算机的角度模拟程序的运行情况。了解内存分配，参数传
  • 同步、异步、阻塞、非阻塞 geeksun 非阻塞
    同步、异步、阻塞、非阻塞这几个概念有时有点混淆，在此文试图解释一下。   同步：发出方法调用后，当没有返回结果，当前线程会一直在等待（阻塞）状态。 场景：打电话，营业厅窗口办业务、B/S架构的http请求-响应模式。   异步：方法调用后不立即返回结果，调用结果通过状态、通知或回调通知方法调用者或接收者。异步方法调用后，当前线程不会阻塞，会继续执行其他任务。 实现：
  • Reverse SSH Tunnel 反向打洞實錄 hongtoushizi ssh
    實際的操作步驟： # 首先，在客戶那理的機器下指令連回我們自己的 Server，並設定自己 Server 上的 12345 port 會對應到幾器上的 SSH port ssh -NfR 12345:localhost:22 [email protected] # 然後在 myhost 的機器上連自己的 12345 port，就可以連回在客戶那的機器 ssh localhost -p 1
  • Hibernate中的缓存 Josh_Persistence 一级缓存Hiberante缓存查询缓存二级缓存
    Hibernate中的缓存   一、Hiberante中常见的三大缓存：一级缓存，二级缓存和查询缓存。 Hibernate中提供了两级Cache，第一级别的缓存是Session级别的缓存，它是属于事务范围的缓存。这一级别的缓存是由hibernate管理的，一般情况下无需进行干预；第二级别的缓存是SessionFactory级别的缓存，它是属于进程范围或群集范围的缓存。这一级别的缓存
  • 对象关系行为模式之延迟加载 home198979 PHP架构延迟加载
    形象化设计模式实战     HELLO!架构   一、概念 Lazy Load：一个对象，它虽然不包含所需要的所有数据，但是知道怎么获取这些数据。 延迟加载貌似很简单，就是在数据需要时再从数据库获取，减少数据库的消耗。但这其中还是有不少技巧的。     二、实现延迟加载 实现Lazy Load主要有四种方法：延迟初始化、虚
  • xml 验证 pengfeicao521 xmlxml解析
    有些字符，xml不能识别，用jdom或者dom4j解析的时候就报错 public static void testPattern() { // 含有非法字符的串 String str =       "Jamey&#52828;&#01;&#02;&#209;&#1282
  • div设置半透明效果 spjich css半透明
    为div设置如下样式：   div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}        说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认2、-moz-opaci
  • 你真的了解单例模式么？ w574240966 java单例设计模式jvm
        单例模式，很多初学者认为单例模式很简单，并且认为自己已经掌握了这种设计模式。但事实上，你真的了解单例模式了么。   一，单例模式的5中写法。（回字的四种写法，哈哈。）     1，懒汉式           （1）线程不安全的懒汉式 public cla