js畫圖原理或工具

打開highcharts.src.js，找到enabled: true, text: 'Highcharts.com',href: '',自己去掉text和href的內(nèi)容，如果不想改源文件就在js里添加屬性credits: { enabled: false }

我們一直強(qiáng)調(diào)網(wǎng)站建設(shè)、成都做網(wǎng)站對(duì)于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對(duì)待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)絡(luò)公司不一定是大公司,創(chuàng)新互聯(lián)公司作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

d3.js畫力學(xué)圖,怎么把圖限制在邊框內(nèi)

力學(xué)圖（ Force ），也有被翻譯做力導(dǎo)向圖等。這種圖很有意思，先從初始數(shù)據(jù)開始，看下面代碼：

var nodes = [ { name: "GuiLin" },

{ name: "GuangZhou" },

{ name: "XiaMen" },

{ name: "HangZhou" },

{ name: "ShangHai" },

{ name: "QingDao" },

{ name: "TianJin" },

{ name: "BeiJing" },

{ name: "ChangChun" },

{ name: "XiAn" },

{ name: "WuluMuQi" },

{ name: "LaSa" },

{ name: "ChengDu" } ];

var edges = [ { source : 0 , target: 1 } ,

{ source : 1 , target: 2 } ,

{ source : 2 , target: 3 } ,

{ source : 3 , target: 4 } ,

{ source : 4 , target: 5 } ,

{ source : 5 , target: 6 } ,

{ source : 6 , target: 7 } ,

{ source : 7 , target: 8 } ,

{ source : 8 , target: 9 } ,

{ source : 9 , target: 10 } ,

{ source : 10 , target: 11 } ,

{ source : 11 , target: 12 } ,

{ source : 12 , target: 0 } ];

這里有頂點(diǎn)（ nodes ）和邊（ edges ），這里的頂點(diǎn)是一些城市名稱，邊是兩個(gè)頂點(diǎn)之間的連線。我們現(xiàn)在要用這些數(shù)據(jù)來做力學(xué)圖。但是這樣的數(shù)據(jù)不適合做力學(xué)圖，比如不知道每一個(gè)頂點(diǎn)畫在哪個(gè)坐標(biāo)等。所以需要先用 Layout 來轉(zhuǎn)換數(shù)據(jù)，我們說過， D3 中的 Layout 就是用來轉(zhuǎn)換數(shù)據(jù)的。 force 的 layout 為：

var force = d3.layout.force()

.nodes(nodes)

.links(edges)

.size([width,height])

.linkDistance(200)

.charge([-100])

.start();

在上面的代碼中：

d3.layout.force() 是力學(xué)圖 Layout 的函數(shù)

nodes() 里傳入頂點(diǎn)的數(shù)組

links() 里放入邊的數(shù)組

size() 是作用域的大小

linkDistance() 用于設(shè)定兩個(gè)頂點(diǎn)之間的長(zhǎng)度

charge() 是設(shè)定彈力的大小。

start() 表示開始轉(zhuǎn)換

調(diào)用這個(gè)函數(shù)后，數(shù)據(jù)就已經(jīng)被轉(zhuǎn)換了，我們看看數(shù)據(jù)從什么轉(zhuǎn)換成什么了：

頂點(diǎn)（轉(zhuǎn)換前）：

頂點(diǎn)（轉(zhuǎn)換后）：

可以看到，轉(zhuǎn)換后，多了 index ， px ， py 等。

再來看看邊的數(shù)據(jù)：

邊（轉(zhuǎn)換前）：

邊（轉(zhuǎn)換后）：

可以看到，邊數(shù)據(jù)的兩個(gè)索引號(hào)直接被轉(zhuǎn)換成了兩個(gè)頂點(diǎn)的數(shù)據(jù)。

好了，有了這些數(shù)據(jù)，我們就可以作圖了。我們用 SVG 中的 line 畫邊，用 SVG 中的 circle 畫頂點(diǎn)。

var svg_edges = svg.selectAll("line")

.data(edges)

.enter()

.append("line")

.style("stroke","#ccc")

.style("stroke-width",1);

var color = d3.scale.category20();

var svg_nodes = svg.selectAll("circle")

.data(nodes)

.enter()

.append("circle")

.attr("r",10)

.style("fill",function(d,i){

return color(i);

})

.call(force.drag);

這樣的代碼我們已經(jīng)很熟悉了，只有最后一句代碼沒出現(xiàn)過， call( force.drag ) 是設(shè)定我們可以拖動(dòng)頂點(diǎn)。這個(gè) call 函數(shù)我們前面說過，這個(gè) call 是用于將當(dāng)前選擇的元素傳到 force.drag 函數(shù)中。

最后，我們還需要一段代碼，如下：

force.on("tick", function(){

svg_edges.attr("x1",function(d){ return d.source.x; });

svg_edges.attr("y1",function(d){ return d.source.y; });

svg_edges.attr("x2",function(d){ return d.target.x; });

svg_edges.attr("y2",function(d){ return d.target.y; });

svg_nodes.attr("cx",function(d){ return d.x; });

svg_nodes.attr("cy",function(d){ return d.y; });

});

tick 指的是時(shí)間間隔，也就是每一個(gè)時(shí)間間隔之后就刷新一遍畫面，刷新的內(nèi)容寫在后面的無名函數(shù) function 中， function 函數(shù)中寫上作圖的內(nèi)容。

html怎么用js特效做折線圖

使用原生js自己寫或js庫（框架）都是可以的，由于目前HTML5并不是所有的瀏覽器都完美支持，使用兼容性比較好的js庫是個(gè)不錯(cuò)的選擇。

例如Highcharts圖標(biāo)庫就可以實(shí)現(xiàn)各類曲線圖、折線圖、區(qū)域圖、3D圖、柱狀圖等等。具體使用參考：。

Highcharts中做折線圖的demo代碼可以作為參考：

html?lang="en"

head

script?type="text/javascript"?src=""/script

script?type="text/javascript"?src=""/script

script?type="text/javascript"?src=""/script

script

$(function?()?{

$('#container').highcharts({

chart:?{

type:?'line'

},

title:?{

text:?'Monthly?Average?Temperature'

},

subtitle:?{

text:?'Source:?WorldClimate.com'

},

xAxis:?{

categories:?['Jan',?'Feb',?'Mar',?'Apr',?'May',?'Jun',?'Jul',?'Aug',?'Sep',?'Oct',?'Nov',?'Dec']

},

yAxis:?{

title:?{

text:?'Temperature?(°C)'

}

},

tooltip:?{

enabled:?false,

formatter:?function()?{

return?'b'+?this.series.name?+'/bbr/'+this.x?+':?'+?this.y?+'°C';

}

},

plotOptions:?{

line:?{

dataLabels:?{

enabled:?true

},

enableMouseTracking:?false

}

},

series:?[{

name:?'Tokyo',

data:?[7.0,?6.9,?9.5,?14.5,?18.4,?21.5,?25.2,?26.5,?23.3,?18.3,?13.9,?9.6]

},?{

name:?'London',

data:?[3.9,?4.2,?5.7,?8.5,?11.9,?15.2,?17.0,?16.6,?14.2,?10.3,?6.6,?4.8]

}]

});

});

/script

/head

body

div?id="container"?style="min-width:700px;height:400px"/div

/body

/html

Javascript如何在網(wǎng)頁上實(shí)現(xiàn)畫圖功能

方法只有一個(gè)：

通過canvas的方式，在畫布上畫圖

步驟：

1、定義一個(gè)canvas

2、獲取canvas，然后通過畫圖

示例：canvas 元素來顯示一個(gè)紅色的矩形

canvas?id="myCanvas"/canvas//定義一個(gè)canvas

script?type="text/javascript"

var?canvas=document.getElementById('myCanvas');//獲取canvas

var?ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';?//圖形填充色

ctx.fillRect(0,0,80,100);?//繪制一個(gè)紅色矩形

/script

js畫圖中怎么樣才能讓自己畫的圖形動(dòng)起來

你的 paintComponent 中用的都是常數(shù), 沒用到 myhero 的數(shù)據(jù), 當(dāng)然不會(huì)動(dòng)!

我稍為改一下就會(huì)動(dòng)了:

public void paintComponent(Graphics g)

{

super.paintComponent(g);

int x=myhero.x, y=myhero.y;

g.fillRect(x+50, y+80, 7, 40);

g.fillRect(x+57,y+87,20,24);

g.fillRect(x+77,y+80,7,40);

g.setColor(Color.red);

g.fillOval(x+59,y+92,15,15);

g.setColor(Color.black);

g.fillRect(x+65,y+68,5,24);

}

但這種畫法永遠(yuǎn)向著上方, 還不會(huì)轉(zhuǎn)向.

你必須再調(diào)整寫法.

文章標(biāo)題：javascript作圖,jquery畫圖
URL分享：http://aaarwkj.com/article6/dsiegog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、定制網(wǎng)站、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)