jqplot配置詳解

2022-08-25 17:09:27 字數 3262 閱讀 1095

1 options =      

2,

15axisdefaults: , //

設定renderer的option配置物件,線狀圖不需要設定

31//

不同圖表的option配置物件請參見下面《jqplot各個不同外掛程式的option物件設定》

32//

中各個圖表的配置option物件

33tickoptions:

50 showticks: true, //

/ 是否顯示刻度線以及座標軸上的刻度值

51 showtickmarks: true, //

設定是否顯示刻度

52 useseriescolor: true

//如果有多個縱(橫)座標軸,通過該屬性設定這些座標軸是否以不同顏色顯示

53},

5455

axes: ,

59yaxis: ,

62x2axis: ,

65y2axis:

68},

6970 seriesdefaults: , //

傳給上個屬性所設定渲染器的option物件,線狀圖的渲染器沒有option物件,

93//

不同圖表的option配置物件請參見下面《jqplot各個不同外掛程式的option物件設定》

94//

中各個圖表的配置option物件

95 markerrenderer: $.jqplot.markerrenderer, //

renderer to use to draw the data

96//

point markers.

97markeroptions:

111 isdragable: true,//

是否允許拖動(如果dragable包已引入),預設可拖動

112},

113 series:[//

如果有多個分類需要顯示,這在此處設定各個分類的相關配置屬性

114//

eg.設定各個分類在分類名稱框中的分類名稱

115//

[label: 'traps division'},,]

116//

配置引數設定同seriesdefaults

117],

118119

legend: ,

128129

grid: //

options to pass to the renderer. note, the default

143//

canvasgridrenderer takes no additional options.

144},

145146

/************************jqplot各個不同外掛程式的option物件設定*****************************

*/147

148//

barrenderer(設定柱狀圖的option物件)

149//

該option物件適用與柱狀圖的series和seriesdefault屬性的相關配置物件設定

150seriesdefaults:

161},

162163

//cursor(游標)

164//

滑鼠移動到圖中時,滑鼠在圖中顯示形式,常與和高亮功能同時使用

165//

此外,通過設定該屬性的zoom相關屬性來對圖中某個區域鑽取(就選定區域放大)

166//

該配置物件直接在option下配置

167168

cursor: ,

187188

//dragable(拖動)

189//

該配置物件通過seriesdefaults和series配置物件進行配置

190seriesdefaults: ,

196},

197//

highlighter(高亮)

198//

設定高亮動作option屬性物件

199//

滑鼠移動到某個資料點上時,該資料點增大並顯示提示資訊框

200//

該配置物件直接在option下配置

201highlighter: ,

219220

//logaxisrenderer(指數渲染器)

221//

該渲染器只有兩個屬性, 指數渲染器通過axesdefaults和axes配置物件進行配置

222223

axesdefaults: ,

228229

//pierenderer(設定餅狀圖的option物件)

230//

餅狀圖通過seriesdefaults和series配置物件進行配置

231232

seriesdefaults:

243},

244245

//pointlabels(資料點標籤)

246//

用於在資料點所在位置顯示相關資訊(非提示框性質)

247seriesdefaults:

252}

253254

//trendline(趨勢線)

255//

餅狀圖通過seriesdefaults和series配置物件進行配置

256257

seriesdefaults:

270}

271 }

注意:匯入js檔案時候,一定要把jquery.jqplot.js主檔案先導入,再匯入其他的附加的js檔案。(就是把主js檔案放其他的js位置上面)。否則會報錯。

JQUERY外掛程式學習之jqPlot

js圖表,有highcharts jqplot jschart,其中highcharts和jschart只能用作個人使用 為了以後專案中能使用,在這用了jqplot 個人和商業都免費 先學習下。關於jqplot的詳細中文配置參考 options axisdefaults 設定renderer的opt...

jqplot 實用技巧 重繪

技巧一 當瀏覽器窗體大小改變時 resizable1 bind resize function event,ui 技巧二 chartobj.series 0 data 0,4 1,7 2,3 chartobj.replot 技巧三 改變plot的ticks plot.axes.yaxis.reset...

Jqplot在joomla元件中的應用

1 在com collect元件中採用的是ajax獲取json型別的值。這上邊有例項。2 在jqplot中由於x軸上的文字密集,最開始想到的是給文字設定乙個傾斜角度,angle 30,可是發現我的字型還是密密麻麻的,沒有變化,後來我在查詢問題時發現可以設定x軸每個座標的寬度,即設定 jqplot x...