還記得以前給大家介紹過的幾款jquery圖表插件麼？忘了？那好，一起來回顧下
jQuery柱狀圖插件TufteGraph
Google Chart 圖表使用詳解
jQuery線狀圖插件Sparkline
jQuery圖表插件Flot用法 及
jQuery圖表插件Flot中文文檔
那麼今天我再來向大家介紹一款jquery圖表插件jqplot，下面是一些中文說明，希望對你有所幫助。
簡介
jqplot是一款非常不錯的基於jquery的圖表插件，這篇文章主要幫助大家整理了jqplot的中文使用說明和在線示例及源碼下載。jqplot插件在支持HTML5的瀏覽器上將會在canvas上呈現圖表。
引入腳本文件
jqplot需要1.4.3以上的jquery版本支持，剛纔說過了，jqplot在支持HTML5 Canvas的瀏覽器上將以canvas呈現，否則，如果你在IE9以下版本的瀏覽器上則要引入excanvas.js文件，當然，jqplot的CSS文件也要同時引入，代碼如下：
|
1
2
3
4
|
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--><script
language="javascript"
type="text/javascript"
src="jquery.min.js"></script>
<script
language="javascript"
type="text/javascript"
src="jquery.jqplot.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="jquery.jqplot.css"
/> |
添加一個plot容器
我們可以在頁面上爲jqplot添加一個容器，比如div，但要注意的是，要爲這個div容器指定寬度好高度，如下代碼：
|
1
|
<div
id="chartdiv"
style="height:400px;width:300px; "></div> |
接下來我們在上面創建好的容器中通過調用$.jqplot實現圖表的生成和渲染，比如如果用下面的數據來初始化jqplot圖表：
|
1
|
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); |
jqplot屬性選項
我們在調用$.jqplot時可以傳入一些參數options來自定義jqplot，部分參數options如下：
|
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
|
seriesColors: [
"#4bb2c5", "#c5b47f",
"#EAA228", "#579575",
"#839557", "#958c12",
"#953579",
"#4b5de4", "#d8b83f",
"#ff5800", "#0085cc"],
// 默認顯示的分類顏色，如果分類的數量超過這裏的顏色數量， // 則從該隊列中第一個位置開始重新取值賦給相應的分類
stackSeries:
false, // 如果置爲true並且有多個分類（如果是折線圖，就必須多於一條折線）， 那麼每個分類（折線）
//在縱軸上的值爲其前所有分類縱軸值總和與其縱，軸值相加值
title:
'', //設置當前圖的標題
title: {
text:
'', //設置當前圖的標題
show:
true,//設置當前圖的標題是否顯示
},
axesDefaults: {
show:
false, 是否自動顯示座標軸。
min:
null, 橫(縱)軸最小刻度值
max:
null, 橫(縱)軸最大刻度值
pad: 1.2, 橫(縱)軸度值增漲因子
ticks: [],
//設置橫（縱）座標的刻度上的值，可爲該ticks數組中的值 numberTicks: undefined,//一個相除因子，用於設置橫（縱）座標刻度間隔，橫（縱）座標刻度間隔值=橫（縱）座標區間長度/(numberTicks-1)
renderer: $.jqplot.LinearAxisRenderer,
// 設置橫（縱）軸上數據加載的渲染器 rendererOptions: {},
// 設置renderer的Option配置對象，線狀圖不需要設置 tickOptions: {
mark:
'outside',
// 設置刻度在座標軸上的顯示方式：分爲:座標軸外顯示，內顯示，和穿過顯示;其值分別爲 'outside', 'inside' or 'cross'。
showMark:
true, //設置是否顯示刻度
showGridline:
true, // 是否在圖表區域顯示刻度值方向的網格
markSize: 4,
// 每個刻度線頂點距刻度線在座標軸上點距離（像素爲單位)如果mark值爲 'cross', 那麼每個刻度線都有上頂點和下頂點，刻度線與座標軸
在刻度線中間交叉，那麼這時這個距離×2
show:
true,
//是否顯示刻度線，與刻度線同方向的網格線，以及座標軸上的刻度值 showLabel:
true, //是否顯示刻度線以及座標軸上的刻度值
formatString:
'', //設置座標軸上刻度值顯示格式，eg:'%b %#d, %Y'表示格式"月 日，年"，"AUG 30,2008"
fontSize:'10px',
//刻度值的字體大小 fontFamily:'Tahoma',
//刻度值上字體 angle:40,
//刻度值與座標軸夾角，角度爲座標軸正向順時針方向 fontWeight:'normal',
//字體的粗細 fontStretch:1//刻度值在所在方向（座標軸外）上的伸展(拉伸)度
}
showTicks:
true,
//是否顯示刻度線以及座標軸上的刻度值, showTickMarks:
true, // 設置是否顯示刻度
useSeriesColor:
true //如果有多個縱（橫）座標軸，通過該屬性設置這些座標軸是否以不同顏色顯示
},
axes: {
xaxis: {
// same options as axesDefaults
},
yaxis: {
// same options as axesDefaults
},
x2axis: {
// same options as axesDefaults
},
y2axis: {
// same options as axesDefaults
}
},
seriesDefaults: {//如果有多個分類，這可通過該配置屬性設置各個分類的共性屬性
show:
true, //設置是否渲染整個圖表區域（即顯示圖表中內容）.
xaxis:
'xaxis', // either 'xaxis' or 'x2axis'.
yaxis:
'yaxis', // either 'yaxis' or 'y2axis'.
label:
'', // 用於顯示在分類名稱框中的分類名稱.
color:
'', // 分類在圖標中表示（折現，柱狀圖等）的顏色.
lineWidth: 2.5,
// 分類圖（特別是折線圖）哪寬度. shadow:
true, // 各圖在圖表中是否顯示陰影區域.
shadowAngle: 45,
//參考grid中相同參數. shadowOffset: 1.25,
//參考grid中相同參數. shadowDepth: 3,
//參考grid中相同參數. shadowAlpha: 0.1,
// Opacity of the shadow. showLine:
true, //是否顯示圖表中的折線（折線圖中的折線）
showMarker:
true, // 是否強調顯示圖中的數據節點
fill:
false,
// 是否填充圖表中折線下面的區域（填充顏色同折線顏色）以及legend //設置的分類名稱框中分類的顏色，此處注意的是如果fill爲true，
//那麼showLine必須爲true，否則不會顯示效果
fillAndStroke:
false,
//在fill爲true的狀態下，在填充區域最上面顯示一條線（如果是折線圖則顯示該折線） fillColor: undefined,
// 設置填充區域的顏色 fillAlpha: undefined,
// 梃置填充區域的透明度 renderer: $.jqplot.PieRenderer,
// 利用渲染器（這裏是利用餅圖PieRenderer）渲染現有圖表 //，從而轉換成所需圖表
rendererOptions: {},
// 傳給上個屬性所設置渲染器的option對象，線狀圖的渲染器沒有option對象，
//不同圖表的Option配置對象請參見下面《jqPlot各個不同插件的Option對象設置》
//中各個圖表的配置Option對象
markerRenderer: $.jqplot.MarkerRenderer,
// renderer to use to draw the data // point markers.
markerOptions: {
show:
true,
// 是否在圖中顯示數據點 style:
'filledCircle',
// 各個數據點在圖中顯示的方式，默認是"filledCircle"(實心圓點), //其他幾種方式circle，diamond, square, filledCircle，
// filledDiamond or filledSquare.
lineWidth: 2,
// 數據點各個的邊的寬度（如果設置過大，各個邊會重複，會顯示的類似於實心點）
size: 9,
// 數據點的大小 color:
'#666666' // 數據點的顏色
shadow:
true,
// 是否爲數據點顯示陰影區（增加立體效果） shadowAngle: 45,
// 陰影區角度，x軸順時針方向 shadowOffset: 1,
// 參考grid中相同參數 shadowDepth: 3,
//參考grid中相同參數 shadowAlpha: 0.07
// 參考grid中相同參數 }
isDragable:
true,//是否允許拖動（如果dragable包已引入）,默認可拖動
},
series:[
//如果有多個分類需要顯示，這在此處設置各個分類的相關配置屬性
//eg.設置各個分類在分類名稱框中的分類名稱
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]//配置參數設置同seriesDefaults
], legend: {
show:
false,//設置是否出現分類名稱框（即所有分類的名稱出現在圖的某個位置）
location:
'ne', // 分類名稱框出現位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12,
// 分類名稱框距圖表區域上邊框的距離（單位px） yoffset: 12,
// 分類名稱框距圖表區域左邊框的距離(單位px) background:''
//分類名稱框距圖表區域背景色 textColor:''
//分類名稱框距圖表區域內字體顏色 },
grid: {
drawGridLines:
true,
// wether to draw lines across the grid or not.
gridLineColor:
'#cccccc' // 設置整個圖標區域網格背景線的顏色
background:
'#fffdf6',
// 設置整個圖表區域的背景色 borderColor:
'#999999',
// 設置圖表的(最外側)邊框的顏色 borderWidth: 2.0,
//設置圖表的（最外側）邊框寬度 shadow:
true,
// 爲整個圖標（最外側）邊框設置陰影，以突出其立體效果 shadowAngle: 45,
// 設置陰影區域的角度，從x軸順時針方向旋轉 shadowOffset: 1.5,
// 設置陰影區域偏移出圖片邊框的距離 shadowWidth: 3,
// 設置陰影區域的寬度 shadowDepth: 3,
// 設置影音區域重疊陰影的數量 shadowAlpha: 0.07
// 設置陰影區域的透明度 renderer: $.jqplot.CanvasGridRenderer,
// renderer to use to draw the grid. rendererOptions: {}
// options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
//jqPlot各個不同插件的Option對象設置
// BarRenderer（設置柱狀圖的Option對象）
//該Option對象適用與柱狀圖的series和seriesDefault屬性的相關配置對象設置
seriesDefaults: {
rendererOptions: {
barPadding: 8,
//設置同一分類兩個柱狀條之間的距離（px） barMargin: 10,
//設置不同分類的兩個柱狀條之間的距離（px）（同一個橫座標表點上） barDirection:
'vertical', //設置柱狀圖顯示的方向：垂直顯示和水平顯示
//，默認垂直顯示 vertical or horizontal.
barWidth:
null, // 設置柱狀圖中每個柱狀條的寬度
shadowOffset: 2,
// 同grid相同屬性設置 shadowDepth: 5,
// 同grid相同屬性設置 shadowAlpha: 0.8,
// 同grid相同屬性設置 }
},
// Cursor(光標)
// 鼠標移動到圖中時，鼠標在圖中顯示形式，常與和高亮功能同時使用
//此外，通過設置該屬性的zoom相關屬性來對圖中某個區域鑽取（就選定區域放大）
//該配置對象直接在option下配置
cursor: {
style:
'crosshair',
//當鼠標移動到圖片上時，鼠標的顯示樣式，該屬性值爲css類 show:
true,
//是否顯示光標 showTooltip:
true, // 是否顯示提示信息欄
followMouse:
false, //光標的提示信息欄是否隨光標（鼠標）一起移動
tooltipLocation:
'se', // 光標提示信息欄的位置設置。如果followMouse=true,那麼該位置爲
//提示信息欄相對於光標的位置。否則，爲光標提示信息欄在圖標中的位置
// 該屬性可選值： n, ne, e, se, etc.
tooltipOffset: 6,
//提示信息欄距鼠標(followMouse=true)或座標軸（followMouse=false）的位置
showTooltipGridPosition:
false,//是否在信息提示欄中顯示光標位置（取其據圖標左和上邊緣線像素距離）
showTooltipUnitPosition:
true,// 是否顯示提示光標所在位置（取其在橫縱軸上數據值）的信息欄
//注：注意此處與showTooltipGridPosition值區別，前者顯示座標值，該處顯示的是數據值
tooltipFormatString:
'%.4P', // 同Highlighter的tooltipFormatString
useAxesFormatters:
true,
// 同Highlighter的tooltipFormatString tooltipAxesGroups: [],
// show only specified axes groups in tooltip. Would specify like:
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes
// combinations with for the series in the plot are shown.
},
// Dragable（拖動）
//該配置對象通過seriesDefaults和series配置對象進行配置
seriesDefaults: {
dragable: {
color: undefined,
// 當拖動數據點是，拖動線與拖動數據點顏色 constrainTo:
'none', //設置拖動的的範圍: 'x'（只能在橫向上拖動）,
// 'y'（只能在縱向上拖動）, or 'none'（無限制）.
},
},
// Highlighter（高亮）
//設置高亮動作option屬性對象
//鼠標移動到某個數據點上時，該數據點增大並顯示提示信息框
//該配置對象直接在option下配置
highlighter: {
lineWidthAdjust: 2.5,
//當鼠標移動到放大的數據點上時，設置增大的數據點的寬度
// 目前僅適用於非實心數據點
sizeAdjust: 5,
// 當鼠標移動到數據點上時，數據點擴大的增量增量 showTooltip:
true, // 是否顯示提示信息欄
tooltipLocation:
'nw', // 提示信息顯示位置（英文方向的首寫字母）: n, ne, e, se, s, sw, w, nw.
fadeTooltip:
true, // 設置提示信息欄出現和消失的方式（是否淡入淡出）
tooltipFadeSpeed:
"fast"//設置提示信息欄淡入淡出的速度： slow, def, fast, 或者是一個毫秒數的值.
tooltipOffset: 2,
// 提示信息欄據被高亮顯示的數據點的偏移位置，以像素計。 tooltipAxes:
'both', // 提示信息框顯示數據點那個座標軸上的值，目前有橫/縱/橫縱三種方式。
//值分別爲 x, y or xy.
tooltipSeparator:
', ' // 提示信息欄不同值之間的間隔符號
useAxesFormatters:
true // 提示信息框中數據顯示的格式是否和該數據在座標軸上顯示格式一致
tooltipFormatString:
'%.5P' // 用於設置提示信息框中數據顯示的格式，前提條件是useAxesFormatters
// 爲false. 此時信息提示框中數據格式不再與座標軸一致，而是以此爲準
//同時，該屬性還支持html格式字符串
//eg:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f'
},
// LogAxisRenderer(指數渲染器)
// 該渲染器只有兩個屬性， 指數渲染器通過axesDefaults和axes配置對象進行配置
axesDefaults: {
base: 10,
// 指數的底數 tickDistribution:
'even', // 座標軸顯示方式：'even' or 'power'. 'even' 產生的是均勻分佈於座標
//軸上的座標刻度值 。而'power' 則是根據不斷增大的增數來確定座標軸上的刻度
},
// PieRenderer(設置餅狀圖的OPtion對象)
// 餅狀圖通過seriesDefaults和series配置對象進行配置
seriesDefaults: {
rendererOptions: {
diameter: undefined,
// 設置餅的直徑 padding: 20,
// 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑 sliceMargin: 20,
// 餅的每個部分之間的距離 fill:true,
// 設置餅的每部分被填充的狀態 shadow:true,
//爲餅的每個部分的邊框設置陰影，以突出其立體效果 shadowOffset: 2,
//設置陰影區域偏移出餅的每部分邊框的距離 shadowDepth: 5,
// 設置陰影區域的深度 shadowAlpha: 0.07
// 設置陰影區域的透明度 }
},
//pointLabels(數據點標籤)
//用於在數據點所在位置顯示相關信息（非提示框性質）
seriesDefaults: {
pointLabels: {
location:'s',//數據標籤顯示在數據點附近的方位
ypadding:2
//數據標籤距數據點在縱軸方向上的距離 }
}
// Trendline（趨勢線）
// 餅狀圖通過seriesDefaults和series配置對象進行配置
seriesDefaults: {
trendline: {
show:
true,
// 是否顯示趨勢線 color:
'#666666',
// 趨勢線顏色 label:
'',
// 趨勢線名稱 type:
'linear',
//趨勢線類型'linear'（直線）, 'exponential'（冪值數線） or 'exp'
shadow:
true,
// 同grid相同屬性設置 lineWidth: 1.5,
// 趨勢線寬度 shadowAngle: 45,
// 同grid相同屬性設置 shadowOffset: 1.5,
// 同grid相同屬性設置 shadowDepth: 3,
// 同grid相同屬性設置 shadowAlpha: 0.07
// 同grid相同屬性設置 }
}
} |
|
1
2
3
4
5
|
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
}); |
其官方網站：http://www.jqplot.com/。
轉載請自覺註明出處 作者：王國峯 原文鏈接：http://www.itivy.com/ivy/archive/2012/1/24/jquery-jqplot.html