var?options?=?{
創(chuàng)新互聯(lián)專注于孟連企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),成都商城網(wǎng)站開發(fā)。孟連網(wǎng)站建設(shè)公司,為孟連等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
series:?{
lines:?{
show:?true
},
points:{
show:?true
}
},
//?在這里設(shè)置顏色
colors:?["#FF7070",?"#0022FF"],
};
$.plot(placeholder,?data,?options);
通過你的截圖來看，下面的那個(gè)圖不是有水平滾動(dòng)條嗎？
難道你希望能夠隨著屏幕的寬度變小，里面的圖標(biāo)也自動(dòng)變小？如果是這樣的話，那么需要看你的代碼了。
當(dāng)然，如果你的“圖表”的大小是固定的值，那么也不用看代碼了，我可以很肯定的告訴你不能。因?yàn)榇笮∫坏┍还潭?，那么就意味著其不能隨著百分比改變，也就不受瀏覽器的大小影響了。
不明白請追問，如果對你有幫助，記得采納~
找到它的樣式，
設(shè)置成：width:30px;height:30px;border-radius:15px;就可以圓了。
你好??！
var?plot?=????$.plot("#placeholder",?[d],?{
xaxis:?{
ticks:?[0,?3,?6,?9,?12,?15,?18,?21,?24],
tickFormatter:?function(axis)?{
return?axis.toString()+":00";
}
}
});
實(shí)際效果如下圖:
因?yàn)镕lot不支持堆棧圖,所以必須加入堆棧圖的插件jquery.flot.stack.js,此范例會(huì)用到的檔案清單如下.
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.axislabels.js"/script
script type="text/javascript" src="/js/flot/jquery.flot.stack.js"/script
script type="text/javascript" src="/js/flot/jshashtable-2.1.js"/script
script type="text/javascript" src="/js/flot/jquery.numberformatter-1.2.3.min.js"/script
接著我們將網(wǎng)站的DNS查詢數(shù)據(jù)建立成如下的數(shù)組格式,因?yàn)槲覀兪怯脮r(shí)間格式數(shù)據(jù),所以建立了一個(gè)gd()函式用來取得javascript timestamps.這個(gè)范例我們用了3筆資料,為了簡化說明,我們這里只顯示1筆數(shù)據(jù)出來,后面2筆資料格式都是一樣的,數(shù)據(jù)格式程序代碼如下.
var data = [
[gd(2012, 1, 1), 208557], [gd(2012, 1, 2), 125068], [gd(2012, 1, 3), 931208], [gd(2012, 1, 4), 450040],
[gd(2012, 1, 5), 761180], [gd(2012, 1, 6), 744526], [gd(2012, 1, 7), 707095], [gd(2012, 1, 8), 601316],
[gd(2012, 1, 9), 187495], [gd(2012, 1, 10), 716189], [gd(2012, 1, 11), 587141], [gd(2012, 1, 12), 147266],
[gd(2012, 1, 13), 574670], [gd(2012, 1, 14), 175881], [gd(2012, 1, 15), 272519], [gd(2012, 1, 16), 211131],
[gd(2012, 1, 17), 637015], [gd(2012, 1, 18), 794050], [gd(2012, 1, 19), 399010], [gd(2012, 1, 20), 799942],
[gd(2012, 1, 21), 595768], [gd(2012, 1, 22), 717126], [gd(2012, 1, 23), 414923], [gd(2012, 1, 24), 462479],
[gd(2012, 1, 25), 674334], [gd(2012, 1, 26), 20312], [gd(2012, 1, 27), 675892], [gd(2012, 1, 28), 808655],
[gd(2012, 1, 29), 194543], [gd(2012, 1, 30), 664716], [gd(2012, 1, 31), 980720]
];
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
堆棧圖選項(xiàng)
當(dāng)你要畫堆棧圖時(shí)需要設(shè)定series.stack為true,這樣Flot就會(huì)以堆棧圖呈現(xiàn),另外我們做的是堆棧折線圖,我們可以設(shè)定series.lines.fill為true,讓圖表用顏色填滿區(qū)塊,程序代碼如下.
series: {
stack: true,
lines: {
show: true,
fill: true
}
}
x軸和y軸部份我們一樣在head里加入jquery.flot.axislabels.js檔案后用設(shè)定axis.axisLabel設(shè)定軸標(biāo)簽名稱還有其它如字號(hào)及字型樣式等,因?yàn)槲覀兪怯脮r(shí)間格式數(shù)據(jù),所以xaxis.mode必須設(shè)定用"time",因?yàn)閿?shù)據(jù)是抓一個(gè)月份的數(shù)據(jù),所以xaxis.tickSize設(shè)定成[3, "day"],3表示刻度卷標(biāo)以每隔3天顯示,而"day"而表示以日期顯示,xaxis.tickLength我們設(shè)定為10,表示刻度線以高度10像素來顯示.而axis.color設(shè)定成"black",這表示刻度標(biāo)簽的顏色,因?yàn)镕lot默認(rèn)的標(biāo)簽顏色為灰色的,我們改成黑色的比較明顯.
另外yaxis.tickFormatter用來自行定義刻度標(biāo)簽的格式.x軸及y軸選項(xiàng)程序代碼如下.
xaxis: {
mode: "time",
tickSize: [3, "day"],
tickLength: 10,
color: "black",
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
}
yaxis: {
color: "black",
axisLabel: "DNS Query Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickFormatter: function (v, axis) {
return $.formatNumber(v, { format: "#,###", locale: "us" });
}
}
選項(xiàng)的最后我們設(shè)定了網(wǎng)格的選項(xiàng),因?yàn)槲覀冇杏玫教崾究虻墓δ?所以grid.hoverable必須設(shè)為true才能顯示,此外我們還設(shè)定了圖表外框?qū)挾萭rid.borderWidth,以及背景使用漸層色呈現(xiàn)grid.backgroundColor.
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#EDF5FF", "#ffffff"] }
}
完成堆棧圖
最后一樣呼叫$.plot函式把數(shù)據(jù)及選項(xiàng)帶進(jìn)去即完成.當(dāng)你在畫堆棧折線圖時(shí),其實(shí)就是把折線圖畫出來后設(shè)定series.stack:true及series.lines.fill:true而已,相信不會(huì)太難.下面我們還會(huì)介紹堆棧柱形圖及堆棧條形圖.
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});
堆棧圖柱形圖
堆棧柱形圖范例 (DNS Query)
我們沿用上面堆棧折線圖的程序代碼,改成堆棧柱形圖,只需要改選項(xiàng)里的幾個(gè)地方,第一個(gè)將series.lines改成series.bars,然后只留下show屬性,另外再加上bars.align設(shè)定成"center"讓條圖對齊中央,還有bars.barWidth設(shè)定成24 * 60 * 60 * 600, 為什么這樣設(shè)定barWidth,因?yàn)槲覀儀軸是用時(shí)間格式數(shù)據(jù)的,也就是以毫秒為單位,所以24 * 60 * 60 * 1000就等于一天,不過最后我們是乘以600不是1000,因?yàn)槲覀儾幌胱寳l圖相互貼在一起,讓條圖之間留點(diǎn)空隙看起來比較好看.
series: {
stack: true,
bars: {
show: true
}
}
bars: {
align: "center",
barWidth:24 * 60 * 60 * 600
}
堆棧圖條形圖
堆棧條形圖范例 (DNS Query)
條形圖就需要點(diǎn)功夫了,因?yàn)闂l形圖是y軸顯示時(shí)間,x軸為數(shù)字,首先你要先把數(shù)據(jù)建立出來如下.
var data = [
[569106, gd(2012, 1, 1)], [743944, gd(2012, 1, 2)], [120865, gd(2012, 1, 3)], [890208, gd(2012, 1, 4)],
[259723, gd(2012, 1, 5)], [177150, gd(2012, 1, 6)], [32430, gd(2012, 1, 7)], [274054, gd(2012, 1, 8)],
[63435, gd(2012, 1, 9)], [994514, gd(2012, 1, 10)], [885453, gd(2012, 1, 11)], [289791, gd(2012, 1, 12)],
[411717, gd(2012, 1, 13)], [95324, gd(2012, 1, 14)], [646479, gd(2012, 1, 15)], [448868, gd(2012, 1, 16)],
[669678, gd(2012, 1, 17)], [909944, gd(2012, 1, 18)], [675965, gd(2012, 1, 19)], [281272, gd(2012, 1, 20)],
[629781, gd(2012, 1, 21)], [330138, gd(2012, 1, 22)], [802835, gd(2012, 1, 23)], [139079, gd(2012, 1, 24)],
[187101, gd(2012, 1, 25)], [354332, gd(2012, 1, 26)], [361090, gd(2012, 1, 27)], [78171, gd(2012, 1, 28)],
[452212, gd(2012, 1, 29)], [404369, gd(2012, 1, 30)], [63509, gd(2012, 1, 31)]
];
接著設(shè)定bars.horizontal為true,若這里沒設(shè)定就會(huì)顯示成柱形圖,然后再設(shè)定yaxis.mode為"time",表示y軸以時(shí)間格式顯示,另外我們還設(shè)定了yaxis.min及yaxis.max,如此可限制y軸刻度顯示的最大及最小值.完整的選項(xiàng)程序代碼如下.
var options2 = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
lineWidth: 1,
barWidth: 24 * 60 * 60 * 450,
horizontal: true
},
xaxis: {
color: "black",
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
tickFormatter: function (v, axis) {
return $.formatNumber(v, { format: "#,###", locale: "us" });
}
},
yaxis: {
mode: "time",
tickSize: [3, "day"],
min: gd(2012, 1, 1),
max: gd(2012, 1, 31),
tickLength: 10,
color: "black",
axisLabel: "DNS Query Count",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#EDF5FF", "#ffffff"] }
}
};
您好，很高興能幫助您
Flot是一套用Javascript寫的繪制圖表用的函式庫, 專門用在網(wǎng)頁上執(zhí)行繪制圖表功能, 由于Flot利用jQuery所以寫出來的, 所以也稱它為jQuery Flot ,它的特點(diǎn)是體積小、執(zhí)行速度快、支持的圖形種類齊全, 用于一般情況絕對夠用. 除此之外, Flot還有許多plugins可供使用, 用以補(bǔ)足Flot 本身所沒有的功能。
你的采納是我前進(jìn)的動(dòng)力，
記得好評和采納，答題不易，互相幫助，
重慶分公司
重慶分公司
