首先如果是遠(yuǎn)程數(shù)據(jù)庫(kù)處理要后臺(tái)腳本去訪問(wèn)取數(shù)據(jù)，比如php,java之類(lèi)，傳到前端。
成都創(chuàng)新互聯(lián)公司成立于2013年，先為渾源等服務(wù)建站，渾源等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為渾源企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
前端可以使用js來(lái)將數(shù)據(jù)顯示成圖表，使用jqplot等組件也可以。
圖表插件，能做出類(lèi)似的，但如果要完全一樣，估計(jì)有難度。 比較好點(diǎn)的圖表插件有HighCharts和FusionCharts，還有一些其它的，你可以自己搜一下。都很好用的，只要看一下它們的api，就可以用幾行代碼加上一些配置，寫(xiě)出一些實(shí)用的圖表了。
這段時(shí)間在學(xué)習(xí)研究jQuery源碼，受益于jQuery日益發(fā)展強(qiáng)大，研究jQuery的大牛越來(lái)越多，學(xué)習(xí)的資料也比前兩年好找了，有很多非常不錯(cuò)的資源，如高云的jQuery1.6.1源碼分析系列。這些教程非常細(xì)致的分析了jQuery內(nèi)部原理和實(shí)現(xiàn)方式，對(duì)學(xué)習(xí)和理解jQuery有非常大的幫助。但是個(gè)人認(rèn)為很多教程對(duì)jQuery的整體結(jié)果把握不足，本人試圖從整體來(lái)闡述一下jQuery的內(nèi)部實(shí)現(xiàn)。
大家知道，調(diào)用jQuery有兩種方式，一種是高級(jí)的實(shí)現(xiàn)，通過(guò)傳遞一個(gè)參數(shù)實(shí)現(xiàn)DOM選擇，如通過(guò)$(“h1″)選擇所有的h1元素，第二種是較為低級(jí)的實(shí)現(xiàn)，如果通過(guò)$.ajax實(shí)現(xiàn)ajax的操作。那么，這兩種方式到底有何不同？用typeof函數(shù)檢測(cè)$(‘h1′)和$.ajax,類(lèi)型分別為object和function，稍微學(xué)過(guò)jQuery的都知道或者聽(tīng)過(guò)過(guò)，前者返回的是一個(gè)jQuery對(duì)象，那么jQuery對(duì)象是什么，它和jQuery是什么關(guān)系呢？我們先來(lái)通過(guò)for(var
i
in
$(”))
document.write(i+”
:::”+$(“”)[i]+””);打印一下jQuery對(duì)象的屬性和對(duì)應(yīng)的值,可以看到它有100多個(gè)屬性，通過(guò)console輸入$(“*”)可以看到大部分屬性是繼承自jQuery原型的屬性，jQuery對(duì)象實(shí)際上是這樣一個(gè)對(duì)象:
所以我們來(lái)推測(cè)，jQuery的實(shí)現(xiàn)可能是類(lèi)似這樣的：
function
jQuery(){
this[0]="Some
DOM
Element";
this[1]="Some
DOM
Element";
this[2]="Some
DOM
Element";
this.length=3;
this.prevObject="Some
Object";
this.context="Some
Object";
this.selector="Some
selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}
這些代碼通過(guò)new操作符就就能創(chuàng)建出擁有上述屬性的jQuery對(duì)象,但是實(shí)際上我們調(diào)用jQuery創(chuàng)建jQuery對(duì)象時(shí)并沒(méi)有使用new操作符，這是如何實(shí)現(xiàn)的呢？來(lái)看jQuery的實(shí)現(xiàn):
var
jQuery
=
function(
selector,
context
)
{
//
The
jQuery
object
is
actually
just
the
init
constructor
'enhanced'
return
new
jQuery.fn.init(
selector,
context,
rootjQuery
);
}
jQuery.fn=jQuery.prototype={
jquery:
core_version,
init:function(selector,context){
//some
code
return
this;
}
//some
code
there
//......
}
jQuery.fn.init.prototype=jQuery.fn;
這里有幾點(diǎn)做得非常巧妙的地方,第一點(diǎn)是通過(guò)jQuery原型屬性的init方法來(lái)創(chuàng)建對(duì)象來(lái)達(dá)到不用new創(chuàng)建對(duì)象的目的，第二點(diǎn)是對(duì)init方法內(nèi)this指向的處理。我們知道，通過(guò)調(diào)用init返回一個(gè)jQuery的實(shí)例，那么這個(gè)實(shí)例就必須要繼承jQuery.prototype的屬性，那么init里面這個(gè)this,
就繼承jQuery.prototype的屬性。但是init里面的this，受制于作用域的限制，并不能訪問(wèn)jQuery.prototype其它的屬性，jQuery通過(guò)一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,這樣以來(lái)，init產(chǎn)生的jQuery對(duì)象就擁有了jQuery.fn的屬性。
到這里，一個(gè)jQuery的基本原型就浮出水面了。這里有兩個(gè)對(duì)象，一個(gè)是jQuery這個(gè)構(gòu)造函數(shù)，另外一個(gè)是這個(gè)構(gòu)造函數(shù)產(chǎn)生的對(duì)象(我們稱(chēng)之為jQuery對(duì)象，它和普通對(duì)象沒(méi)有什么區(qū)別),
如下關(guān)系圖:
可以看到j(luò)Query構(gòu)造函數(shù)和jQuery.prototype均有各自的屬性和方法，兩者的調(diào)用方法各不一樣,這兩個(gè)對(duì)象都有一個(gè)extend方法，都是用來(lái)擴(kuò)展自身的屬性和方法，在jQuery內(nèi)部，extend的實(shí)現(xiàn)實(shí)際是靠一樣的代碼,
將在后面的源碼分析中做以詳細(xì)的分析。
實(shí)例代碼如下：
!DOCTYPE html
head
titlejQuery漸顯效果的人物多級(jí)關(guān)系圖/title
meta http-equiv="content-type" content="text/html;charset=gb2312"
style type="text/css"
#box{width:500px;height:500px;position:relative;}
.host{position:absolute;width:100px;height:50px;line-height:50px;text-align:center;color:#000000;background-color:#eeeeee;border:#000000 1px solid;font-weight:bolder;}
.guest{position:absolute;width:80px;height:40px;line-height:40px;text-align:center;color:#999999;background-color:#FFFFFF;border:#000000 1px solid;cursor:pointer;}
.relationship{position:absolute;width:60px;height:20px;color:#aaa;line-height:20px;font-size:12px;text-align:center;}
/style
script src=""/script
script type="text/javascript"
var relationName = [
{name:"成龍",friend:[
{name:"房祖名",relationship:"父子"},
{name:"林鳳嬌",relationship:"夫妻"},
},
{name:"房祖名",friend:[
{name:"成龍",relationship:"父子"},
{name:"林鳳嬌",relationship:"母子"},
},
{name:"林鳳嬌",friend:[
{name:"成龍",relationship:"夫妻"},
{name:"房祖名",relationship:"母子"},
},
{name:"吳綺莉",friend:[
{name:"成龍",relationship:"緋聞"},
{name:"林鳳嬌",relationship:"情敵"},
},
{name:"徐靜蕾",friend:[
{name:"李亞鵬",relationship:"電影"},
{name:"韓寒",relationship:"娛樂(lè)圈"},
},
{name:"方大同",friend:[
{name:"房祖名",relationship:"情敵"},
{name:"薛凱琪",relationship:"否認(rèn)拍拖"},
},
{name:"薛凱琪",friend:[
{name:"方大同",relationship:"否認(rèn)拍拖"},
{name:"房祖名",relationship:"女友"}]
}
]
var relation = {
radius:150,
boxW:500,
boxH:500,
hostW:100,
hostH:50,
guestW:80,
guestH:40,
relationW:60,
relationH:20,
angle:0,
id:"box",
init:function(array,n){//傳入?yún)?shù)1：數(shù)組 參數(shù)2：第幾個(gè)
this.array = array;
this.appendHost(this.array,n);
this.appendQuest(this.array,n);
this.appendRelationShip(this.array,n);
},
appendHost:function(array,n){
var box = $("#"+this.id);
var host ="span class='host'"+array[n].name+"/span";
box.append(host)
this.postHost();
},
postHost:function(){
var x = (this.boxW - this.hostW)/2;
var y = (this.boxH - this.hostH)/2;
$(".host").css({
left:x,
top:y
})
},
appendQuest:function(array,n){
var box = $("#"+this.id);
var guests="";
var that = this;
for(var i=0; iarray[n].friend.length; i++){
guests+="span class='guest'"+array[n].friend[i].name+"/span";
}
$(guests).appendTo(box);
$(".guest").live("click",function(){
that.move(that,this);
})
this.postQuest();
},
postQuest:function(){
var guests = $(".guest");
var that = this;
guests.each(function(i){
guests.eq(i).css({
left:that.setQuestPose(guests.length,that.radius,i,that.guestW,that.guestH,that.angle).left,
top:that.setQuestPose(guests.length,that.radius,i,that.guestW,that.guestH,that.angle).top
}).attr("angle",i/guests.length)
})
},
setQuestPose:function(n,r,i,w,h,d){//n代表共幾個(gè)對(duì)象 r代表周長(zhǎng) i代表第幾個(gè)對(duì)象 w代表外面對(duì)象的寬帶 h代表外面對(duì)象的高度 d代表其實(shí)角度
var p = i/n*Math.PI*2+Math.PI*2*d;
var x = r * Math.cos(p);
var y = r * Math.sin(p);
return {
"left":parseInt(this.boxW/2+ x - w/2),
"top":parseInt(this.boxH/2 + y - h/2)
}
},
appendRelationShip:function(array,n){
var box = $("#"+this.id);
var relation="";
for(var i=0; iarray[n].friend.length; i++){
relation+="span class='relationship'"+array[n].friend[i].relationship+"/span";
}
box.append(relation);
this.postRelationShip();
},
postRelationShip:function(){
var guests = $(".relationship");
var that = this;
guests.each(function(i){
guests.eq(i).css({
left:that.setQuestPose(guests.length,that.radius/2,i,that.relationW,that.relationH,that.angle).left,
top:that.setQuestPose(guests.length,that.radius/2,i,that.relationW,that.relationH,that.angle).top
})
})
},
move:function(t,i){
var n = $(".guest").index($(i));
this.angle = parseFloat($(i).attr("angle"))+0.5;
this.delect(n);
this.moveHost(i);
this.moveQuest(i);
this.moveRelationship(i);
this.changeClass();
setTimeout(function(){t.newAppend(i)},500);
},
newAppend:function(i){
this.newAppendGuest(i,"guest","name",this.guestW,this.guestH,this.radius);
this.newAppendGuest(i,"relationship","relationship",this.relationW,this.relationH,this.radius/2);
},
newAppendGuest:function(i,className,name,w,h,r){
var host = $(i).html();
var guest = $(".guest").html();
var box = $("#"+this.id);
var that = this;
var next=0;
for(var i=0; ithis.array.length; i++){
if(host == this.array[i].name){
for(var j=0;jthis.array[i].friend.length; j++){
if(guest !== this.array[i].friend[j].name){
next++;
var guests ="span class='"+className+"'"+this.array[i].friend[j][name]+"/span";
$(guests).appendTo(box).css({
left:that.setQuestPose(this.array[i].friend.length,r,next,w,h,that.angle).left,
top:that.setQuestPose(this.array[i].friend.length,r,next,w,h,that.angle).top
}).attr("angle",that.angle+next/this.array[i].friend.length).hide().fadeIn(1000);
}
}
}
}
},
moveHost:function(i){
var hLeft = parseInt($(".host").css("left")) + this.hostW/2;
var hTop = parseInt($(".host").css("top")) + this.hostH/2;
var gLeft = parseInt($(i).css("left")) + this.guestW/2;
var gTop = parseInt($(i).css("top")) + this.guestH/2;
var l = gLeft - hLeft;
var t = gTop - hTop;
var left = (hLeft - l - this.guestW/2)+"px";
var top = (hTop - t - this.guestH/2)+"px";
this.animate(".host",left,top);
},
moveRelationship:function(i){
var hLeft = parseInt($(".host").css("left")) + this.hostW/2;;
var hTop = parseInt($(".host").css("top")) + this.hostH/2;
var gLeft = parseInt($(".relationship").css("left")) + this.relationW/2;
var gTop = parseInt($(".relationship").css("top")) + this.relationH/2;
var l = gLeft - hLeft;
var t = gTop - hTop;
var left = (hLeft - l - this.relationW/2)+"px";
var top = (hTop - t - this.relationH/2)+"px";
this.animate(".relationship",left,top);
},
moveQuest:function(i){
var left = $(".host").css("left");
var top = $(".host").css("top");
this.animate(i,left,top);
},
delect:function(n){
$(".guest").slice(0,n).remove();
$(".guest").slice(1).remove();
$(".relationship").slice(0,n).remove();
$(".relationship").slice(1).remove();
},
animate:function(i,left,top){
$(i).animate({
left:left,
top:top
},500);
},
changeClass:function(){
var that =this;
$(".guest").addClass("abcdef").removeClass("guest");
$(".host").addClass("guest").removeClass("host").attr("angle",that.angle);
$(".abcdef").addClass("host").removeClass("abcdef").attr("angle",null);
}
}
$(document).ready(function(){
relation.init(relationName,0)
})
/script
/head
body
看不到效果，刷新一下就可以了；br
div id="box"/div
/body
/html
重慶分公司
重慶分公司
