js資料庫關係圖插件,前端關係圖插件

本文目錄一覽：

• 1、大數據顯示適合用js圖表插件嗎
• 2、如何用js實現動態畫數據關係圖
• 3、用什麼語言 可以製作人物關係圖 比如js 或者jquery 人物的名稱 和關係 是從資料庫中讀出的
• 4、求教，有沒有js插件或者jquery插件可以實現微博的社交關係圖的
• 5、jquery怎麼實現關係圖的繪製

大數據顯示適合用js圖表插件嗎

適合的，

1、Highcharts

Highcharts 是一個用純 JavaScript 編寫的一個圖表庫， 能夠很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表，並且免費提供給個人學習、個人網站和非商業用途使用。

2、Highstock

Highstock 是用純 JavaScript 編寫的股票圖表控制項，可以開發股票走勢或大數據量的時間軸圖表。它包含多個高級導航組件：預設置數據時間範圍，日期選擇器、滾動條、平移、縮放功能。

3、Highmaps

Highmaps 是一款基於 HTML5 的優秀地圖組件。Highmaps 繼承了 Highcharts 簡單易用的特性，利用它可以方便快捷的創建用於展現銷售、選舉結果等其他與地理位置關係密切的交互性地圖圖表。

如何用js實現動態畫數據關係圖

1.各個應用系統、伺服器信息及系統直接的調用都錄入到資料庫中

2.前端拓撲圖、或系統調用關係圖的展示UI可以通過一些選項從資料庫中撈出數據，然後在UI上動態繪製出關係圖來

3.如HTML5 Canvas或基於HTML5 Canvas的JTopo、SVG都可以很好的繪製出這種圖來。

用什麼語言 可以製作人物關係圖 比如js 或者jquery 人物的名稱 和關係 是從資料庫中讀出的

首先如果是遠程資料庫處理要後台腳本去訪問取數據，比如php,java之類，傳到前端。

前端可以使用js來將數據顯示成圖表，使用jqplot等組件也可以。

求教，有沒有js插件或者jquery插件可以實現微博的社交關係圖的

圖表插件，能做出類似的，但如果要完全一樣，估計有難度。 比較好點的圖表插件有HighCharts和FusionCharts，還有一些其它的，你可以自己搜一下。都很好用的，只要看一下它們的api，就可以用幾行代碼加上一些配置，寫出一些實用的圖表了。

jquery怎麼實現關係圖的繪製

實例代碼如下：

!DOCTYPE html

head

titlejQuery漸顯效果的人物多級關係圖/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:”娛樂圈”},

},

{name:”方大同”,friend:[

{name:”房祖名”,relationship:”情敵”},

{name:”薛凱琪”,relationship:”否認拍拖”},

},

{name:”薛凱琪”,friend:[

{name:”方大同”,relationship:”否認拍拖”},

{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){//傳入參數1：數組 參數2：第幾個

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代表共幾個對象 r代表周長 i代表第幾個對象 w代表外面對象的寬頻 h代表外面對象的高度 d代表其實角度

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