條形圖和柱形圖一樣常被用來比較各組數(shù)據(jù)的相互關(guān)系, 差別在于條形圖的長度越長, 所代表的值越大. 使用條形圖的時機(jī)在于如果你有非常多組數(shù)據(jù)要放在一起比較, 這時用柱形圖的話, 圖表的寬度就有可能超出屏幕寬度, 所以改用條形圖后會不斷延伸的就是高度, 也方便使用者能夠一眼就看到整張圖表.
本章用貴金屬價格, 黃金、白金、白銀及鈀金的現(xiàn)價當(dāng)作數(shù)據(jù), 另外還會介紹如何控條圖的漸層色, 及控制圖表圖例的位置.
一開始不免俗的一樣是放置定位點(diǎn), 并且指定寬度和高度, 你可以直在用style設(shè)定, 或是指定一個CSS class給定位點(diǎn).
1
2
3
4
5
6
7
<style type="text/css">
.mychart{
width:300px;
height:150px;
}
</style>
<div id="flot-placeholder" class="mychart"></div>
這次數(shù)據(jù)我們只有7筆, 先建立一個叫rawData的數(shù)組變量, 再把數(shù)據(jù)放進(jìn)去. 還記得之前章節(jié)里的數(shù)據(jù)格式嗎? 是像這樣的 [x, y], 我們以x軸放入時間格式數(shù)據(jù)(1325347200000, 1328025600000, ...), 或是按序號編碼(0, 1, 2, ....), 而y軸則放入數(shù)據(jù)的數(shù)值, 但這次我們做的是條形圖, x軸和y軸數(shù)據(jù)位置必須對調(diào)如下面的rawData變量. 你可以看到數(shù)組里的第一組數(shù)字是1582.3, 這個是金價, 而第二組數(shù)字就是序號.
1
2
3
4
5
6
7
8
9
10
11
12
13
var rawData = [
[1582.3, 0], //Gold
[28.95, 1], //Silver
[1603, 2], //Platinum
[774, 3], //Palladium
[1245, 4], //Rhodium
[85, 5], //Ruthenium
[1025, 6] //Iridium
];
var dataSet = [
{ label: "Precious Metal Price", data: rawData, color: "#AB5800" }
];
接著就是要建立刻度數(shù)據(jù), 可能有人會認(rèn)為因?yàn)槲覀冏龅氖菞l形圖, x軸和y軸數(shù)據(jù)對調(diào)了, 所以刻度數(shù)據(jù)也要跟著對調(diào). 答案是錯的, 刻度數(shù)據(jù)并不需要跟著對調(diào).1
2
3
var ticks = [
[0, "Gold"], [1, "Silver"], [2, "Platinum"], [3, "Palldium"], [4, "Rhodium"], [5, "Ruthenium"], [6, "Iridium"]
];
條形圖選項
當(dāng)你繪制條形圖時, bars.horizontal必須設(shè)定為true, 若沒有設(shè)定, 就會變成柱形圖. 在此范例里我們設(shè)定了bars.fillColor, 這屬性可以接受的值可以是單一顏色(如rgba(255, 255, 255, 0.8))或是漸層色, 我們用的是后者. Flot里指定漸層色的方法可以是1
{ colors: [ color1, color2, ... ] }
或是調(diào)整顏色的透明度如1
{ colors: [ { opacity: 0.8 }, { opacity: 0.1 } ] }
另外我們還設(shè)定了bars.iineWidth, lineWidth是以像素為單位的線或輪廓的厚度, 在這范例里我們設(shè)成1, bars的完整選項程序代碼如下1
2
3
4
5
6
7
bars: {
align: "center",
barWidth: 0.5,
horizontal: true,
fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
lineWidth: 1
}
我們所用的數(shù)據(jù)中, 價格最貴的是白金為$1,603美金, 所以圖表會以白金的條圖做為寬度, 但如果我們想要讓白金的條圖不要占滿整張圖表的寬度的話, 就可以設(shè)定axis.max, 我們這在這設(shè)定2000, 如此一來白金的條圖部份就不會占滿整個寬度, 你也可以設(shè)定axis.min, 作用與max相反. axis.tickColor是設(shè)定網(wǎng)格線的顏色, 若不設(shè)定的話Flot會自動生成并且?guī)б恍┩该鞫葹榛? axis.color則是設(shè)定刻度標(biāo)簽的顏色.
在此我們?yōu)榱嗣阑潭葮?biāo)簽的格式, 我們用了jQuery Number Formatter外掛, 讓x軸的值輸出成貨幣格式, 要改變刻度標(biāo)簽可以復(fù)寫axis.tickFormatter, 此函式傳入了2個參數(shù), tick value和axis object, 并且會傳回字符串. 而Number Formatter可以到此
下載.
而axis.axisLabel則是設(shè)定軸卷標(biāo), 此功能也是需要加入插件jquery.flot.axislabels.js才能使用.
以下是軸選項的程序代碼1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
xaxis: {
axisLabel: "Price (USD/oz)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
max: 2000,
tickColor: "#5E5E5E",
tickFormatter: function (v, axis) {
return $.formatNumber(v, { format: "#,###", locale: "us" });
},
color:"black"
}
yaxis: {
axisLabel: "Precious Metals",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickColor: "#5E5E5E",
ticks: ticks,
color:"black"
}
Flot的圖例是自動產(chǎn)生的,不過你也可以控制圖例的細(xì)節(jié),預(yù)設(shè)圖例會出現(xiàn)在右上角,不過有時候會擋到圖表,你可以設(shè)定legend.position讓圖例出現(xiàn)在4個角落的其中一個,可設(shè)定的值有"ne"、"nw"、"se"和"sw",分別代表右上角(north east)、左上角(north west)、右下角(south east)和左下角(south west). legend.noColumns代表圖例的table會被分成多少行,若設(shè)為0則表示只會分成單一一行. legend.labelBoxBorderColor則是設(shè)定圖例標(biāo)簽盒邊框的顏色.1
2
3
4
5
legend: {
noColumns: 0,
labelBoxBorderColor: "#858585",
position: "ne"
}
呼叫$.plot完成繪圖
最后把上面建立的dataSet以及options帶入$.plot, 就完成了!1
2
3
4
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataSet, options);
$("#flot-placeholder").UseTooltip();
});
在此范例里有用了提示框, 這部份在往后會有專屬的一章講解, 在此就不詳細(xì)說明.本范例完整程序代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/js/lib/jquery-1.8.3.min.js" type='text/javascript'></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.min.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.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>
<script type="text/javascript">
//******* Precious Metal Price - HORIZONTAL BAR CHART
var rawData = [[1582.3, 0], [28.95, 1],[1603, 2],[774, 3],[1245, 4], [85, 5],[1025, 6]];
var dataSet = [{ label: "Precious Metal Price", data: rawData, color: "#E8E800" }];
var ticks = [[0, "Gold"], [1, "Silver"], [2, "Platinum"], [3, "Palldium"], [4, "Rhodium"], [5, "Ruthenium"], [6, "Iridium"]];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5,
horizontal: true,
fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
lineWidth: 1
},
xaxis: {
axisLabel: "Price (USD/oz)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
max: 2000,
tickColor: "#5E5E5E",
tickFormatter: function (v, axis) {
return $.formatNumber(v, { format: "#,###", locale: "us" });
},
color: "black"
},
yaxis: {
axisLabel: "Precious Metals",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickColor: "#5E5E5E",
ticks: ticks,
color: "black"
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#858585",
position: "ne"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#171717", "#4F4F4F"] }
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataSet, options);
$("#flot-placeholder").UseTooltip();
});
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) ||
(previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//alert(color)
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.yaxis.ticks[y].label +
" : <strong>" + $.formatNumber(x, { format: "#,###", locale: "us" }) + "</strong> USD/oz");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 10,
left: x + 10,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
</script>
</head>
<body>
<div style="width:450px;height:300px;text-align:center;margin:10px">
<div id="flot-placeholder" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
練習(xí)
本章的完整范例程序代碼可以在這里找到并做在線練習(xí)
Go to Example Tester
