javascript 分別讀取時(shí)間中的年、月、日、時(shí)、分、秒的方法

javascript 自帶有個(gè)對(duì)象(構(gòu)造函數(shù))，Date().下面是代碼：

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供從江網(wǎng)站建設(shè)、從江做網(wǎng)站、從江網(wǎng)站設(shè)計(jì)、從江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、從江企業(yè)網(wǎng)站模板建站服務(wù)，十余年從江做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

var myDate = new Date(); //實(shí)例一個(gè)時(shí)間對(duì)象；

myDate.getFullYear(); //獲取系統(tǒng)的年；

myDate.getMonth()+1; //獲取系統(tǒng)月份，由于月份是從0開始計(jì)算，所以要加1

myDate.getDate(); // 獲取系統(tǒng)日，

myDate.getHours(); //獲取系統(tǒng)時(shí)，

myDate.getMinutes(); //分

myDate.getSeconds(); //秒

jquery.fn.gantt.js相關(guān)問題

在jquery里可以直接用isNaN()，因?yàn)樗荍avaScript的類庫(kù)。是由JavaScript語言寫的。

例如：

script type="text/javascript"

$(document).ready(function(){

alert(isNaN($('#id').val()));

});

/script可以直接使用

Highcharts Y軸的刻度如何保留2位小數(shù)呢

Highcharts Y軸的刻度保留2位小數(shù)是通過highcharts對(duì)象的yAxis屬性中有一個(gè)tickPositions屬性，用于手動(dòng)設(shè)置軸上的坐標(biāo)點(diǎn)的值，當(dāng)此屬性存在時(shí)，會(huì)覆蓋tickInterval屬性和tickPixelInterval屬性（這兩個(gè)屬性并不會(huì)對(duì)渲染產(chǎn)生影響，只是根據(jù)手動(dòng)賦值而自行調(diào)整這兩個(gè)屬性的默認(rèn)值，橫軸的tickPixelInterval屬性默認(rèn)為100，豎軸的tickPixelInterval屬性默認(rèn)為72，橫軸豎軸的tickInterval屬性均為空）。

Highcharts 是一個(gè)用純JavaScript編寫的一個(gè)圖表庫(kù)， 能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。HighCharts支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖和綜合圖表。

初識(shí) D3.js ：打造專屬可視化

隨著現(xiàn)在自定義可視化的需求日益增長(zhǎng)，Highcharts、echarts等高度封裝的可視化框架已經(jīng)無法滿足用戶各種強(qiáng)定制性的可視化需求了，這個(gè)時(shí)候D3的無限定制的能力就脫穎而出。

如果想要通過D3完成可視化，除了對(duì)于D3本身API的學(xué)習(xí), 關(guān)于web標(biāo)準(zhǔn)的HTML, SVG, CSS, Javascript 和 數(shù)據(jù)可視化的概念以及標(biāo)準(zhǔn)都是需要學(xué)習(xí)的。這無疑帶來了較高的學(xué)習(xí)門檻，但這也是值得的，因?yàn)檎莆?D3 后，我們幾乎可以實(shí)現(xiàn)任何 2d 的可視化需求。

本文通過對(duì)D3核心模塊分析以及進(jìn)行具體案例實(shí)踐的方式，來幫助初學(xué)者學(xué)習(xí)了解D3的繪圖思路。

D3的全稱是 Data-Driven Documents（數(shù)據(jù)驅(qū)動(dòng)文檔），是基于數(shù)據(jù)來操作文檔的 JavaScript 庫(kù)，其核心在于使用繪圖指令對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換，在源數(shù)據(jù)的基礎(chǔ)上創(chuàng)建新的可繪制數(shù)據(jù)， 生成SVG路徑以及通過數(shù)據(jù)和方法在DOM中創(chuàng)建數(shù)據(jù)可視化元素（如軸）。

相對(duì)于Echats等開箱即用的可視化框架來說，D3更接近底層，它可以直接控制原生的SVG元素，并且不直接提供任何一種現(xiàn)成的可視化圖表，所有的圖表都需我們?cè)谒膸?kù)里挑選合適的方法構(gòu)建而成，這也大大提高了它的可視化定制能力。而且D3 沒有引入新的圖形元素，它遵循了web標(biāo)準(zhǔn)（HTML, CSS, SVG 以及 Canvas ）來展示數(shù)據(jù) ，所以它可以不需要依賴其他框架獨(dú)立運(yùn)行在現(xiàn)代瀏覽器中。

在V4版本后，D3的 API 現(xiàn)在已經(jīng)被拆分成一個(gè)個(gè)模塊，我們可以根據(jù)自己的可視化需求進(jìn)行按需加載。根據(jù)泛義可以將D3 API模塊分為以下的幾大類： DOM操作、數(shù)據(jù)處理，數(shù)據(jù)分析轉(zhuǎn)換、地理路徑，行為等 。

這里我們主要對(duì) D3-selection 和 D3-scale 模塊進(jìn)行解析：

D3-selection （選擇集） 是 D3js的核心模塊，主要是用來進(jìn)行選擇元素，設(shè)置屬性、數(shù)據(jù)綁定，事件綁定等操作。

選擇元素： D3-selection 提供了兩種方法來獲取目標(biāo)元素，d3.select()：返回目標(biāo)元素的第一個(gè)節(jié)點(diǎn)，d3.selectAll()：返回目標(biāo)元素的集合，乍一看有點(diǎn)類似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一個(gè) selection 對(duì)象，querySelector 返回的是一個(gè) NodeList 數(shù)組。通過控制臺(tái)打印的信息，可以看到 selection 下的 groups 存放了所有選擇的元素集合，parents 存放了所有選中元素的父節(jié)點(diǎn)。

設(shè)置屬性或者綁定事件： 我們不需要關(guān)心 groups 的結(jié)構(gòu)是怎么樣的。當(dāng)調(diào)用 selection.attr 或者 selection.style 的時(shí)候, selection 中的所有 group 的所有子元素都會(huì)被調(diào)用，group 存在的唯一影響是: 當(dāng)我們傳參是一個(gè)function 的時(shí)候，例如 selection.attr('attrName', function(data, i)) 或 selection.on('click', function(data, i)) 時(shí)， 傳遞的 function(data, i) 中, 第二個(gè)參數(shù) i 是元素在 group 中的索引而不是在整個(gè) selection 中的索引。

數(shù)據(jù)綁定： 實(shí)際上是給選擇的DOM元素的 __data__ 屬性賦值，這里提供了3種方式進(jìn)行數(shù)據(jù)綁定：

（1）給每一個(gè)單獨(dú)的 DOM 元素調(diào)用 selection.datum：d3.select('body').datum(20) 等價(jià)于 document.body.__data__ = 20

（2）從父節(jié)點(diǎn)中繼承來數(shù)據(jù), 比如: append , insert , select，子節(jié)點(diǎn)會(huì)主動(dòng)繼承父節(jié)點(diǎn)的數(shù)據(jù)：

（3） 調(diào)用 selection.data() 方法，支持傳入裝有基礎(chǔ)數(shù)據(jù)類型的數(shù)據(jù)，也支持傳入一個(gè)function(parentNode, groupIndex)根據(jù)節(jié)點(diǎn)索引與數(shù)據(jù)做映射，data()方法引入了 d3 中非常重要的 join 思想:

綁定 data 到 DOM 元素， 在D3中是通過比較 data 和 DOM 的 key 值來找到對(duì)應(yīng)關(guān)系的。 如果我們沒有單獨(dú)設(shè)置 key 值，那么默認(rèn)根據(jù) data 的下標(biāo)索引來設(shè)定，但是當(dāng)數(shù)據(jù)順序發(fā)生改變，這個(gè)默認(rèn)下標(biāo) key 值 就變得不可靠了，這時(shí)我們可以使用 selection.data(data, keyFunction) 中的第二個(gè)參數(shù) keyFunction，根據(jù)當(dāng)前的數(shù)據(jù)返回一個(gè)對(duì)應(yīng)的 key 值。通過下面的圖例可以看出，不管是有一個(gè)還是多個(gè) group（每個(gè)group 都是獨(dú)立的），只要我們保證在任意一個(gè) group 中的 key 值是唯一的，數(shù)據(jù)一旦發(fā)生變化都會(huì)反映給對(duì)應(yīng)的 DOM 元素（ update 的過程）：

上面提到的都是data數(shù)據(jù)和DOM元素?cái)?shù)量相同的情況下的數(shù)據(jù)綁定，那如果data數(shù)據(jù)和DOM元素?cái)?shù)量不相同時(shí)，我們來看看 D3 又是如何進(jìn)行數(shù)據(jù)綁定的：現(xiàn)在終于可以來介紹 D3-selecion 模塊的核心 Join 思想了，這個(gè)思想簡(jiǎn)單來說就是 “不應(yīng)該告訴D3去怎么創(chuàng)建元素, 而是告訴D3，.selectAll() 得到的 selecion 集合應(yīng)該和 .data(data) 綁定的數(shù)據(jù)要怎么一一對(duì)應(yīng)”。

從上圖可以看出，在進(jìn)行 d3.data(data) 數(shù)據(jù)綁定的時(shí)候，會(huì)產(chǎn)生三種狀態(tài)的選擇集：

用 Join 的方式來理解意味著，我們要做的事情僅僅是聲明 DOM集合和數(shù)據(jù)集合之間的關(guān)系, 并且通過處理三個(gè)不同狀態(tài)的集合 enter、update 、 exit 來描述這種關(guān)系。這種方式可以大大簡(jiǎn)化我們對(duì)DOM元素的操作，我們不需要再用 if 和 for 循環(huán)的方式來進(jìn)行復(fù)雜的邏輯判斷，來得到我們需要得到的元素集合。并且在處理動(dòng)態(tài)數(shù)據(jù)的時(shí)候，可以通過處理這三種狀態(tài)，輕松的展示實(shí)時(shí)數(shù)據(jù)和添加平滑的動(dòng)態(tài)交互效果。

D3-scale （比列尺） 提供多種不同類型的比例尺。經(jīng)常和 D3-axis 坐標(biāo)軸模塊一起使用。

D3-scale 提供了多種連續(xù)性和非連續(xù)性的比例尺，總體可以將他們分為三大類：

常用的一些比例尺：

（1）d3-scaleLinear 線性比例尺(連續(xù)性輸入和連續(xù)性輸出)

可以看出，調(diào)用d3.scaleLinear()可以生成線性比例尺，domain()是輸入域，range()是輸出域，相當(dāng)于將domain中的數(shù)據(jù)集映射到range的數(shù)據(jù)集中。

使用示例：

映射關(guān)系：

（2）d3-scaleTime 時(shí)間比例尺(連續(xù)性輸入和連續(xù)性輸出)

時(shí)間比例尺與線性比例尺類似，只不過輸入域變成了一個(gè)時(shí)間軸。正常我們使用比例尺都是個(gè)正序的過程，但是D3也提供了invert()以及invertExtent()方法，我們可以通過輸出域中的具體值得出對(duì)應(yīng)輸入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(連續(xù)性輸入和離散性輸出)

量化比例尺是將連續(xù)的輸入域根據(jù)輸出域被分割為均勻的片段，所以它的輸出域是離散的。

使用示例：

映射關(guān)系：

（4）d3. scaleThreshold 閾值比例尺(連續(xù)性輸入和離散性輸出)

閾值比例尺可以為一組連續(xù)數(shù)據(jù)指定分割閾值，閾值比例尺默認(rèn)的 domain：[0.5] 以及默認(rèn)的 range：[0, 1] ，因此默認(rèn)的 d3.scaleThreshold() 等價(jià)于 Math.round 函數(shù)。 閾值比例尺輸入域?yàn)?N 的話，輸出域必須為 N + 1，否則比例尺對(duì)某些值可能會(huì)返回 undefined，或者輸出域多余的值會(huì)被忽略。

使用示例：

存在三種映射關(guān)系：

a. 當(dāng)domain和range的數(shù)據(jù)是 N : N+1

b. 當(dāng)domain和range的數(shù)據(jù)是 N : N + 大于1

c. 當(dāng)domain和range的數(shù)據(jù)是 N + 大于0 : N

（5）d3.scaleOrdinal 序數(shù)比例尺(離散性輸入和離散性輸出)

與scaleLinear等連續(xù)性比例尺不同，序數(shù)比例尺的輸出域和輸入域都是離散的。

使用示例：

存在三種映射關(guān)系：

a.當(dāng)domain和range的數(shù)據(jù)是一一對(duì)應(yīng)

b.當(dāng)domain少于range的數(shù)據(jù)

c.當(dāng)domain多于range的數(shù)據(jù)

通過以上的學(xué)習(xí)，應(yīng)該對(duì)d3是如何操作DOM以及坐標(biāo)軸的數(shù)據(jù)映射為相應(yīng)的可視化表現(xiàn)有了一定的了解，下面我們來實(shí)際運(yùn)用這兩個(gè)模塊，來實(shí)現(xiàn)我們常見的可視化圖表：柱狀圖。

（1）首先添加一個(gè)SVG元素。

（2）根據(jù)我們上面說到 d3.scale 模塊以及 d3.axis 模塊繪制坐標(biāo)軸，d3.scaleBand() 叫做序數(shù)分段比例尺，類似我們說的 d3.scaleOrdinal() 序數(shù)比例尺，但是它支持連續(xù)的數(shù)值類型的輸出域，離散的輸入域可以將連續(xù)的范圍劃分為均勻的分段。這里再講一個(gè)細(xì)節(jié)，在繪制網(wǎng)格的時(shí)候，我們并沒有額外添加 line 元素來實(shí)現(xiàn)，而是通過 d3.axis 坐標(biāo)軸模塊的 axis.ticks() 方法對(duì)坐標(biāo)軸刻度進(jìn)行了設(shè)置，通過 tickSIze() 設(shè)置了刻度線長(zhǎng)度，來模擬和圖表寬度相等的網(wǎng)格線，并且還可以通過 tickFormat() 對(duì)Y軸刻度值進(jìn)行格式化轉(zhuǎn)換。

（3）坐標(biāo)軸繪制好了后，我們通過數(shù)據(jù)綁定來繪制與之對(duì)應(yīng)的矩形(rect)元素了。

（4）這個(gè)時(shí)候柱狀圖已經(jīng)基本繪制好了，我們?cè)儇S富內(nèi)容展示，添加標(biāo)簽、標(biāo)題等提示信息。

（5）最后我們通過給柱子綁定監(jiān)聽事件，實(shí)現(xiàn)tooltips的信息浮層交互。

通過對(duì) d3.selection 、d3.scale 以及 d3.axis等模塊的學(xué)習(xí)，我們已經(jīng)可以繪制出常用的柱狀圖等圖表，我們也可以通過d3提供的其他模塊繪制出更加復(fù)雜的可視化效果，例如通過 d3-hierarchy(層級(jí)模塊) 實(shí)現(xiàn)層級(jí)樹圖可視化，d3-geo(地理投影) 實(shí)現(xiàn)地圖數(shù)據(jù)可視化等，本文講解的內(nèi)容還只是D3庫(kù)的冰山一角。所以等我們掌握了D3后，限制我們實(shí)現(xiàn)可視化的不再是技術(shù)而是想象力。

如何用JS命令制作一個(gè)網(wǎng)絡(luò)時(shí)鐘，時(shí)間取自網(wǎng)絡(luò)標(biāo)準(zhǔn)時(shí)鐘的時(shí)間(不是取自本地電腦的時(shí)間)。

div id="d"/div

canvas id="clock" width="400" height="400"/canvas

script type="text/javascript"

var time = new Date();

var h = time.getHours(); //時(shí)

var m = time.getMinutes(); //分

var s = time.getSeconds(); //秒

h=h12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //時(shí)針 初始位置

//=====================================

var x=200,y=200,sAngle=0; //x y 原點(diǎn) 秒針角度變量

function draw(){

var c=document.getElementById("clock");

var ctx=c.getContext("2d"); //獲取繪圖對(duì)象

ctx.clearRect(0,0,c.width,c.height); //清除上次繪制的圖形

s++;//秒針

ctx.fillStyle = '#fff' //填充白色背景色

ctx.fillRect(0,0,c.width,c.height); //設(shè)置畫布區(qū)域

//填充圓點(diǎn)，在畫布中心（200,200）繪制一個(gè)半徑10px的圓形

ctx.beginPath();

ctx.arc(x,y,10,0,Math.PI*2,true);

ctx.fill();

ctx.closePath();

//填充版權(quán)文字

ctx.fillStyle="#ccc";

ctx.font = "12pt Arial";

ctx.fillText(" beyond",150,250);

//調(diào)用日期并填充到畫布中

ctx.fillStyle="#666";

ctx.font = "14pt Verdana";

ctx.fillText(time.getMonth()+1+"-"+time.getDate(),183,170);

ctx.save(); //保存當(dāng)前繪圖狀態(tài)

// 時(shí)間刻度

for(var i=0;i12;i++){

var angle=(Math.PI*2)/12;

ctx.beginPath();//開始繪制

ctx.font="12px Arial";

if(i==0||i==3||i==6||i==9){

ctx.fillStyle="red";

radius=4;

}else{

ctx.fillStyle="blue";

radius=3;

}

ctx.arc(x,y-100,radius,0,Math.PI*2,true); //畫圓

ctx.fill(); //填充路徑

trans(ctx,x,y,angle); //刻度分布

}

ctx.restore(); //恢復(fù)上次保存的繪圖狀態(tài)

sAngle=(Math.PI*2)/60*s; //秒度

//時(shí)針轉(zhuǎn)動(dòng)

ctx.save();

ctx.strokeStyle="red";

ctx.lineWidth=3;

trans(ctx,x,y,(Math.PI*2)/60*h);

pointer(ctx,x,y,y-40);

ctx.restore();

//分針轉(zhuǎn)動(dòng)

ctx.save();

ctx.strokeStyle="blue";

ctx.lineWidth=2;

trans(ctx,x,y,(Math.PI*2)/60*m);

pointer(ctx,x,y,y-68);

ctx.restore();

//秒針轉(zhuǎn)動(dòng)

ctx.save();

ctx.strokeStyle="#000";

trans(ctx,x,y,sAngle);

pointer(ctx,x,y,y-80);

ctx.restore();

//數(shù)據(jù)整理

if(s%60==0){

sAngle=0,s=0,m++;

if(m%12==0){ //每十二分 時(shí)針旋轉(zhuǎn)一次

if(m!=0)h++;

if(m%60==0)m=0;

}

if(h%60==0)h=0;

}

}

//繪制指針

function pointer(ctx,x,y,z){

ctx.beginPath();

ctx.moveTo(x,y);

ctx.lineTo(x,z);

ctx.stroke();

ctx.fill();

}

//據(jù)坐標(biāo)旋轉(zhuǎn)

function trans(ctx,x,y,angle){

ctx.transform(Math.cos(angle), Math.sin(angle),

-Math.sin(angle), Math.cos(angle),

x*(1-Math.cos(angle)) + x*Math.sin(angle),

y*(1-Math.cos(angle)) - y*Math.sin(angle))

}

setInterval("draw()",1000);

/script

/div

如何畫Flot時(shí)間數(shù)據(jù)格式圖

時(shí)間數(shù)據(jù)格式最常與折線圖搭配,可以用來看數(shù)據(jù)的走向及趨勢(shì),Flot的時(shí)間數(shù)據(jù)格式是以javascript timestamps為單位,也就是毫秒,從"1970-01-01 00:00"算起.在這章我們會(huì)介紹如何自定時(shí)間數(shù)據(jù)的輸出格式.

黃金價(jià)格(時(shí)間格式數(shù)據(jù))范例

繪圖用到的檔案

所有需要的檔案清單如下.jquery.flot.axislabels.js為軸標(biāo)簽的插件,jquery.flot.time.js為使用時(shí)間數(shù)據(jù)格式的插件.另外為了讓IE8以下版本能顯示Flot圖表,所以需要excanvas.min.js插件.

script type="text/javascript" src="/js/jquery-1.8.3.min.js"/script

!--[if lte IE 8]script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"/script![endif]--

script type="text/javascript" src="/js/flot/jquery.flot.js"/script

script type="text/javascript" src="/js/flot/jquery.flot.time.js"/script

script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"/script

建立數(shù)據(jù)

在范例里我們繪制了2條折線圖,所以我們就建立2個(gè)數(shù)組變量,并在數(shù)組里插入數(shù)組格式如[x ,y],分別代表x軸及y軸資料,在x軸我們用了一個(gè)自定義函式gd(),是為了要抓取javascript timestamps資料,在這里我們準(zhǔn)備了一個(gè)月的黃金價(jià)格數(shù)據(jù),程序代碼如下.

//sell out

var data1 = [

[gd(2013, 1, 2), 1690.25], [gd(2013, 1, 3), 1696.3], [gd(2013, 1, 4), 1659.65], [gd(2013, 1, 7), 1668.15], [gd(2013, 1, 8), 1656.1], [gd(2013, 1, 9), 1668.65], [gd(2013, 1, 10), 1668.15], [gd(2013, 1, 11), 1680.2], [gd(2013, 1, 14), 1676.7], [gd(2013, 1, 15), 1680.7], [gd(2013, 1, 16), 1689.75], [gd(2013, 1, 17), 1687.25], [gd(2013, 1, 18), 1698.3], [gd(2013, 1, 21), 1696.8], [gd(2013, 1, 22), 1701.3], [gd(2013, 1, 23), 1700.8], [gd(2013, 1, 24), 1686.75], [gd(2013, 1, 25), 1680], [gd(2013, 1, 28), 1668.65], [gd(2013, 1, 29), 1671.2], [gd(2013, 1, 30), 1675.7], [gd(2013, 1, 31), 1684.25]

];

//buy in

var data2 = [

[gd(2013, 1, 2), 1674.15], [gd(2013, 1, 3), 1680.15], [gd(2013, 1, 4), 1643.8], [gd(2013, 1, 7), 1652.25], [gd(2013, 1, 8), 1640.3], [gd(2013, 1, 9), 1652.75], [gd(2013, 1, 10), 1652.25], [gd(2013, 1, 11), 1664.2], [gd(2013, 1, 14), 1660.7], [gd(2013, 1, 15), 1664.7], [gd(2013, 1, 16), 1673.65], [gd(2013, 1, 17), 1671.15], [gd(2013, 1, 18), 1682.1], [gd(2013, 1, 21), 1680.65], [gd(2013, 1, 22), 1685.1], [gd(2013, 1, 23), 1684.6], [gd(2013, 1, 24), 1670.65], [gd(2013, 1, 25), 1664], [gd(2013, 1, 28), 1652.75], [gd(2013, 1, 29), 1655.25], [gd(2013, 1, 30), 1659.7], [gd(2013, 1, 31), 1668.2]

];

function gd(year, month, day) {

return new Date(year, month - 1, day).getTime();

}

接著我們建立一個(gè)叫dataset的數(shù)組變量,把上面建立好的數(shù)據(jù)放到數(shù)組里的對(duì)象中,設(shè)定到data屬性里,在這里我們還設(shè)定了label屬性,這將會(huì)用做圖例的顯示名稱,而color屬性決定了折線圖的顏色,points.fillColor屬性則是數(shù)據(jù)點(diǎn)的填滿顏色,另外也要將points.show設(shè)定為true,數(shù)據(jù)點(diǎn)符號(hào)才會(huì)顯示,最后因?yàn)槲覀兪钱嬚劬€圖,所以要設(shè)定lines.show為true,折線圖才會(huì)出現(xiàn).

var dataset = [

{

label: "Sell out",

data: data1,

color: "#FF0000",

points: { fillColor: "#FF0000", show: true },

lines: { show: true }

},

{

label: "Buy in",

data: data2,

xaxis:2,

color: "#0062E3",

points: { fillColor: "#0062E3", show: true },

lines: { show: true }

}

];

建立圖表選項(xiàng)

在這里我們?yōu)榱俗寛D表看起來美觀一點(diǎn),我們?cè)O(shè)定了series.shadowSize,這會(huì)讓折線圖繪出陰影,讓圖表看起來更立體.

series: {

shadowSize: 5

}

在y軸的選項(xiàng)里,yaxis.color表示y軸刻度卷標(biāo)的文字顏色,這里設(shè)定成黑色的.而yaxis.tickDecimals是用來設(shè)定y軸刻度標(biāo)簽的小數(shù)點(diǎn)位數(shù),因?yàn)辄S金價(jià)格是有小數(shù)的,所以我們?cè)O(shè)定成顯示2位小數(shù),輸出看起來就會(huì)是像1650.00,而所有axisLabel開頭的屬性都是屬于軸標(biāo)簽的,也就是我們?cè)谝婚_始時(shí)加入的jquery.flot.axislabels.js插件的功能.

yaxis: {

color: "black",

tickDecimals: 2,

axisLabel: "Gold Price in USD/oz",

axisLabelUseCanvas: true,

axisLabelFontSizePixels: 12,

axisLabelFontFamily: 'Verdana, Arial',

axisLabelPadding: 5

}

因?yàn)閤軸的部份是顯示時(shí)間數(shù)據(jù)格式的,所以在xaxis.mode里需要設(shè)定成"time",這樣Flot才會(huì)以時(shí)間格式編譯x軸的刻度標(biāo)簽.另外我們用了xaxis.tickFormatter自行定義刻度標(biāo)簽要輸出的格式,在這里我們輸出成星期幾,若是不用自行定義的方式,你也可以設(shè)定timeformat:"%a"讓卷標(biāo)顯示星期幾.xaxis.position表示刻度標(biāo)簽要出現(xiàn)在那里,我們?cè)O(shè)定成"top"表示出現(xiàn)在圖表的上方.

在x的第二個(gè)軸的部份,我們?cè)O(shè)定了tickformat:"%m/%d",表示刻度標(biāo)簽會(huì)輸入出:01/05的日期格式,若要輸出年含年度的日期可以寫成"%Y/%m/%d",輸出會(huì)變成:2012/01/05,Flot還支持其它的日期格式設(shè)定.另外我們還設(shè)定了tickSize:[3, "day"],這表示刻度標(biāo)簽會(huì)以每3天的間隔顯示,如果設(shè)定成tickSize:[2, "month"]則表示刻度標(biāo)簽會(huì)以每2個(gè)月的間隔顯示

var dayOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"];

xaxes: [{

mode: "time",

tickFormatter: function (val, axis) {

return dayOfWeek[new Date(val).getDay()];

},

color: "black",

position: "top",

axisLabel: "Weekday",

axisLabelUseCanvas: true,

axisLabelFontSizePixels: 12,

axisLabelFontFamily: 'Verdana, Arial',

axisLabelPadding: 5

},

{

mode: "time",

timeformat: "%m/%d",

tickSize: [3, "day"],

color: "black",

axisLabel: "Date",

axisLabelUseCanvas: true,

axisLabelFontSizePixels: 12,

axisLabelFontFamily: 'Verdana, Arial',

axisLabelPadding: 10

}]

完成繪圖

最后我們?cè)俸艚?.plot把上面建立的dataset以及options帶入,再呼叫UseTootip()后,整個(gè)繪圖即完成.

$(document).ready(function () {

$.plot($("#flot-placeholder"), dataset, options);

$("#flot-placeholder").UseTooltip();

});

文章名稱：刻度javascript,刻度尺
地址分享：http://chinadenli.net/article38/dsegjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、微信小程序、網(wǎng)站排名、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(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)