jqPlot 基于jquery的畫圖插件
更新時(shí)間:2011年04月26日 22:39:00 作者:
jqPlot是一款基于jquery類庫(kù)的圖標(biāo)繪制插件。通過jqPlot可以再網(wǎng)頁中繪制線狀、柱狀、餅狀等多種樣式圖表。而且,jqPlot具有插件可擴(kuò)展性(Pluggability),你可以編寫自己的圖表樣式。
前邊也講過一個(gè)基于java的圖形報(bào)表,功能及外觀也不錯(cuò),但存在通用性的問題。所以我們來學(xué)一個(gè)具有易用性+兼容性+可擴(kuò)展性的js圖表插件。
jqPlot是一款基于jquery類庫(kù)的圖標(biāo)繪制插件。通過jqPlot可以再網(wǎng)頁中繪制線狀、柱狀、餅狀等多種樣式圖表。而且,jqPlot具有插件可擴(kuò)展性(Pluggability),你可以編寫自己的圖表樣式。
官方地址:http://www.jqplot.com/
功能概述:
有多種圖表樣式可供選擇
可以自定義日期軸線
可設(shè)置旋轉(zhuǎn)軸文字
自動(dòng)計(jì)算趨勢(shì)線
工具條提示和高亮數(shù)據(jù)點(diǎn)
默認(rèn)最優(yōu)設(shè)置,非常易于使用
以上功能在jqPlot主頁中的示例頁面有很多直觀的展示。這里是它詳細(xì)使用文檔。
缺點(diǎn):柱狀圖無法顯示具體數(shù)據(jù)值。餅狀圖無法顯示具體百分比。
下邊是搜集的詳細(xì)參數(shù)配置:
options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默認(rèn)顯示的分類顏色,
//如果分類的數(shù)量超過這里的顏色數(shù)量,則從該隊(duì)列中第一個(gè)位置開始重新取值賦給相應(yīng)的分類
stackSeries: false, // 如果置為true并且有多個(gè)分類(如果是折線圖,就必須多于一條折線),
// 那么每個(gè)分類(折線)在縱軸上的值為其前所有分類縱軸值總和與其縱
//軸值相加值(eg,當(dāng)前分類縱軸值為Y3
//,其前有Y2,Y1,那么他顯示在Y軸上值為Y2+Y3+Y1,目前該屬性支持線圖和柱狀圖
title: '', //設(shè)置當(dāng)前圖的標(biāo)題
title: {
text: '', // 設(shè)置當(dāng)前圖的標(biāo)題
show: true,//設(shè)置當(dāng)前標(biāo)題是否顯示
},
axisDefaults: {
show: false, // wether or not to renderer the axis. Determined automatically.
min: null, // 橫(縱)坐標(biāo)顯示的最小值
max: null, // 橫(縱)坐標(biāo)顯示的最大值
pad: 1.2, // 一個(gè)相乘因子,
//(數(shù)據(jù)在橫(縱)軸上最大值-數(shù)據(jù)在橫(縱)軸上最小值)*pad值=該軸顯示的橫(縱)坐標(biāo)區(qū)間長(zhǎng)度
// 該軸顯示的橫(縱)坐標(biāo)區(qū)間長(zhǎng)度=橫(縱)坐標(biāo)顯示的最大值-橫(縱)坐標(biāo)顯示的最小值
//如果設(shè)置了max和min的值的話,那么會(huì)優(yōu)先考慮min和max設(shè)置的值
ticks: [], //設(shè)置橫(縱)坐標(biāo)的刻度上的值,可為該ticks數(shù)組中的值,
// a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
numberTicks: undefined, //一個(gè)相除因子,用于設(shè)置橫(縱)坐標(biāo)刻度間隔
//橫(縱)坐標(biāo)刻度間隔值=橫(縱)坐標(biāo)區(qū)間長(zhǎng)度/(numberTicks-1)
tickInterval:'', //橫(縱)坐標(biāo)刻度間隔值,可為日期字符串
renderer: $.jqplot.LinearAxisRenderer, // 設(shè)置橫(縱)軸上數(shù)據(jù)加載的渲染器,有dateAxisRenderer(參見本文最后相關(guān)介紹) 。
rendererOptions: {}, // 設(shè)置renderer的Option配置對(duì)象,線狀圖不需要設(shè)置
//不同圖表的Option配置對(duì)象請(qǐng)參見下面《jqPlot各個(gè)不同插件的Option對(duì)象設(shè)置》
//中各個(gè)圖表的配置Option對(duì)象
tickOptions: {
mark: 'outside', // 設(shè)置橫(縱)坐標(biāo)刻度在坐標(biāo)軸上顯示方式,分為坐標(biāo)軸內(nèi),外,穿過坐標(biāo)軸顯示
// 值也分為:'outside', 'inside' 和 'cross',
showMark: true, //設(shè)置是否顯示刻度
showGridLine: true, // 是否在圖表區(qū)域顯示刻度值方向的網(wǎng)格線
markSize: 4, // 每個(gè)刻度線頂點(diǎn)距刻度線在坐標(biāo)軸上點(diǎn)距離(像素為單位)
//如果mark值為 'cross', 那么每個(gè)刻度線都有上頂點(diǎn)和下頂點(diǎn),刻度線與坐標(biāo)軸
//在刻度線中間交叉,那么這時(shí)這個(gè)距離×2,
show: true, // 是否顯示刻度線,與刻度線同方向的網(wǎng)格線,以及坐標(biāo)軸上的刻度值
showLabel: true, // 是否顯示刻度線以及坐標(biāo)軸上的刻度值
formatString: '', // 梃置坐標(biāo)軸上刻度值顯示格式,eg:'%b %#d, %Y'表示格式"月 日,年","AUG 30,2008"
fontSize:'10px', //刻度值的字體大小
fontFamily:'Tahoma', //刻度值上字體
angle:40, //刻度值與坐標(biāo)軸夾角,角度為坐標(biāo)軸正向順時(shí)針方向
fontWeight:'normal', //字體的粗細(xì)
fontStretch:1//刻度值在所在方向(坐標(biāo)軸外)上的伸展(拉伸)度
}
showTicks: true, /// 是否顯示刻度線以及坐標(biāo)軸上的刻度值
showTickMarks: true, //設(shè)置是否顯示刻度
useSeriesColor: true //如果有多個(gè)縱(橫)坐標(biāo)軸,通過該屬性設(shè)置這些坐標(biāo)軸是否以不同顏色顯示
},
axes: {
xaxis: {
// 設(shè)置同 axisDefaults
},
yaxis: {
// 設(shè)置同 axisDefaults
},
x2axis: {
// 設(shè)置同 axisDefaults
},
y2axis: {
// 設(shè)置同 axisDefaults
}
},
seriesDefaults: {//如果有多個(gè)分類,這可通過該配置屬性設(shè)置各個(gè)分類的共性屬性
show: true, // 設(shè)置是否渲染整個(gè)圖表區(qū)域(即顯示圖表中內(nèi)容)
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // 用于顯示在分類名稱框中的分類名稱
color: '', // 分類在圖標(biāo)中表示(折現(xiàn),柱狀圖等)的顏色
lineWidth: 2.5, // 分類圖(特別是折線圖)哪寬度
shadow: true, // 各圖在圖表中是否顯示陰影區(qū)域
shadowAngle: 45, // 參考grid中相同參數(shù)
shadowOffset: 1.25, // 參考grid中相同參數(shù)
shadowDepth: 3, // 參考grid中相同參數(shù)
shadowAlpha: 0.1, // 參考grid中相同參數(shù)
showLine: true, //是否顯示圖表中的折線(折線圖中的折線)
showMarker: true, // 是否強(qiáng)調(diào)顯示圖中的數(shù)據(jù)節(jié)點(diǎn)
fill: false, // 是否填充圖表中折線下面的區(qū)域(填充顏色同折線顏色)以及l(fā)egend
//設(shè)置的分類名稱框中分類的顏色,此處注意的是如果fill為true,
//那么showLine必須為true,否則不會(huì)顯示效果
fillAndStroke: false, //在fill為true的狀態(tài)下,在填充區(qū)域最上面顯示一條線(如果是折線圖則顯示該折線)
fillColor: undefined, // 設(shè)置填充區(qū)域的顏色
fillAlpha: undefined, // 梃置填充區(qū)域的透明度
renderer: $.jqplot.PieRenderer, // 利用渲染器(這里是利用餅圖PieRenderer)渲染現(xiàn)有圖表
//,從而轉(zhuǎn)換成所需圖表
rendererOptions: {}, // 傳給上個(gè)屬性所設(shè)置渲染器的option對(duì)象,線狀圖的渲染器沒有option對(duì)象,
//不同圖表的Option配置對(duì)象請(qǐng)參見下面《jqPlot各個(gè)不同插件的Option對(duì)象設(shè)置》
//中各個(gè)圖表的配置Option對(duì)象
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
// point markers.
markerOptions: {
show: true, // 是否在圖中顯示數(shù)據(jù)點(diǎn)
style: 'filledCircle', // 各個(gè)數(shù)據(jù)點(diǎn)在圖中顯示的方式,默認(rèn)是"filledCircle"(實(shí)心圓點(diǎn)),
//其他幾種方式circle,diamond, square, filledCircle,
// filledDiamond or filledSquare.
lineWidth: 2, // 數(shù)據(jù)點(diǎn)各個(gè)的邊的寬度(如果設(shè)置過大,各個(gè)邊會(huì)重復(fù),會(huì)顯示的類似于實(shí)心點(diǎn))
size: 9, // 數(shù)據(jù)點(diǎn)的大小
color: '#666666' // 數(shù)據(jù)點(diǎn)的顏色
shadow: true, // 是否為數(shù)據(jù)點(diǎn)顯示陰影區(qū)(增加立體效果)
shadowAngle: 45, // 陰影區(qū)角度,x軸順時(shí)針方向
shadowOffset: 1, // 參考grid中相同參數(shù)
shadowDepth: 3, //參考grid中相同參數(shù)
shadowAlpha: 0.07 // 參考grid中相同參數(shù)
}
isDragable: true,//是否允許拖動(dòng)(如果dragable包已引入),默認(rèn)可拖動(dòng)
},
series:[//如果有多個(gè)分類需要顯示,這在此處設(shè)置各個(gè)分類的相關(guān)配置屬性
//eg.設(shè)置各個(gè)分類在分類名稱框中的分類名稱
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]
//配置參數(shù)設(shè)置同seriesDefaults
],
legend: {
show: false,//設(shè)置是否出現(xiàn)分類名稱框(即所有分類的名稱出現(xiàn)在圖的某個(gè)位置)
location: 'ne', // 分類名稱框出現(xiàn)位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 分類名稱框距圖表區(qū)域上邊框的距離(單位px)
yoffset: 12, // 分類名稱框距圖表區(qū)域左邊框的距離(單位px)
background:'' //分類名稱框距圖表區(qū)域背景色
textColor:'' //分類名稱框距圖表區(qū)域內(nèi)字體顏色
..其他關(guān)于樣式設(shè)計(jì)參考官方文檔
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc' // 設(shè)置整個(gè)圖標(biāo)區(qū)域網(wǎng)格背景線的顏色
background: '#fffdf6', // 設(shè)置整個(gè)圖表區(qū)域的背景色
borderColor: '#999999', // 設(shè)置圖表的(最外側(cè))邊框的顏色
borderWidth: 2.0, //設(shè)置圖表的(最外側(cè))邊框?qū)挾?
shadow: true, // 為整個(gè)圖標(biāo)(最外側(cè))邊框設(shè)置陰影,以突出其立體效果
shadowAngle: 45, // 設(shè)置陰影區(qū)域的角度,從x軸順時(shí)針方向旋轉(zhuǎn)
shadowOffset: 1.5, // 設(shè)置陰影區(qū)域偏移出圖片邊框的距離
shadowWidth: 3, // 設(shè)置陰影區(qū)域的寬度
shadowDepth: 3, // 設(shè)置影音區(qū)域重疊陰影的數(shù)量
shadowAlpha: 0.07 // 設(shè)置陰影區(qū)域的透明度
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各個(gè)不同插件的Option對(duì)象設(shè)置******************************/
// BarRenderer(設(shè)置柱狀圖的Option對(duì)象)
//該Option對(duì)象適用與柱狀圖的series和seriesDefault屬性的相關(guān)配置對(duì)象設(shè)置
seriesDefaults: {
rendererOptions: {
barPadding: 8, //設(shè)置同一分類兩個(gè)柱狀條之間的距離(px)
barMargin: 10, //設(shè)置不同分類的兩個(gè)柱狀條之間的距離(px)(同一個(gè)橫坐標(biāo)表點(diǎn)上)
barDirection: 'vertical', //設(shè)置柱狀圖顯示的方向:垂直顯示和水平顯示
//,默認(rèn)垂直顯示 vertical or horizontal.
barWidth: null, // 設(shè)置柱狀圖中每個(gè)柱狀條的寬度
shadowOffset: 2, // 同grid相同屬性設(shè)置
shadowDepth: 5, // 同grid相同屬性設(shè)置
shadowAlpha: 0.8, // 同grid相同屬性設(shè)置
}
},
// Cursor(光標(biāo))
// 鼠標(biāo)移動(dòng)到圖中時(shí),鼠標(biāo)在圖中顯示形式,常與和高亮功能同時(shí)使用
//此外,通過設(shè)置該屬性的zoom相關(guān)屬性來對(duì)圖中某個(gè)區(qū)域鉆?。ň瓦x定區(qū)域放大)
//該配置對(duì)象直接在option下配置
cursor: {
style: 'crosshair', //當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí),鼠標(biāo)的顯示樣式,該屬性值為css類
show: true, //是否顯示光標(biāo)
showTooltip: true, // 是否顯示提示信息欄
followMouse: false, //光標(biāo)的提示信息欄是否隨光標(biāo)(鼠標(biāo))一起移動(dòng)
tooltipLocation: 'se', // 光標(biāo)提示信息欄的位置設(shè)置。如果followMouse=true,那么該位置為
//提示信息欄相對(duì)于光標(biāo)的位置。否則,為光標(biāo)提示信息欄在圖標(biāo)中的位置
// 該屬性可選值: n, ne, e, se, etc.
tooltipOffset: 6, //提示信息欄距鼠標(biāo)(followMouse=true)或坐標(biāo)軸(followMouse=false)的位置
showTooltipGridPosition: false,//是否在信息提示欄中顯示光標(biāo)位置(取其據(jù)圖標(biāo)左和上邊緣線像素距離)
showTooltipUnitPosition: true,// 是否顯示提示光標(biāo)所在位置(取其在橫縱軸上數(shù)據(jù)值)的信息欄
//注:注意此處與showTooltipGridPosition值區(qū)別,前者顯示坐標(biāo)值,該處顯示的是數(shù)據(jù)值
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(拖動(dòng))
//該配置對(duì)象通過seriesDefaults和series配置對(duì)象進(jìn)行配置
seriesDefaults: {
dragable: {
color: undefined, // 當(dāng)拖動(dòng)數(shù)據(jù)點(diǎn)是,拖動(dòng)線與拖動(dòng)數(shù)據(jù)點(diǎn)顏色
constrainTo: 'none', //設(shè)置拖動(dòng)的的范圍: 'x'(只能在橫向上拖動(dòng)),
// 'y'(只能在縱向上拖動(dòng)), or 'none'(無限制).
},
},
// Highlighter(高亮)
//設(shè)置高亮動(dòng)作option屬性對(duì)象
//鼠標(biāo)移動(dòng)到某個(gè)數(shù)據(jù)點(diǎn)上時(shí),該數(shù)據(jù)點(diǎn)增大并顯示提示信息框
//該配置對(duì)象直接在option下配置
highlighter: {
lineWidthAdjust: 2.5, //當(dāng)鼠標(biāo)移動(dòng)到放大的數(shù)據(jù)點(diǎn)上時(shí),設(shè)置增大的數(shù)據(jù)點(diǎn)的寬度
// 目前僅適用于非實(shí)心數(shù)據(jù)點(diǎn)
sizeAdjust: 5, // 當(dāng)鼠標(biāo)移動(dòng)到數(shù)據(jù)點(diǎn)上時(shí),數(shù)據(jù)點(diǎn)擴(kuò)大的增量增量
showTooltip: true, // 是否顯示提示信息欄
tooltipLocation: 'nw', // 提示信息顯示位置(英文方向的首寫字母): n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // 設(shè)置提示信息欄出現(xiàn)和消失的方式(是否淡入淡出)
tooltipFadeSpeed: "fast"http://設(shè)置提示信息欄淡入淡出的速度: slow, def, fast, 或者是一個(gè)毫秒數(shù)的值.
tooltipOffset: 2, // 提示信息欄據(jù)被高亮顯示的數(shù)據(jù)點(diǎn)的偏移位置,以像素計(jì)。
tooltipAxes: 'both', // 提示信息框顯示數(shù)據(jù)點(diǎn)那個(gè)坐標(biāo)軸上的值,目前有橫/縱/橫縱三種方式。
//值分別為 x, y or xy.
tooltipSeparator: ', ' // 提示信息欄不同值之間的間隔符號(hào)
useAxesFormatters: true // 提示信息框中數(shù)據(jù)顯示的格式是否和該數(shù)據(jù)在坐標(biāo)軸上顯示格式一致
tooltipFormatString: '%.5P' // 用于設(shè)置提示信息框中數(shù)據(jù)顯示的格式,前提條件是useAxesFormatters
// 為false. 此時(shí)信息提示框中數(shù)據(jù)格式不再與坐標(biāo)軸一致,而是以此為準(zhǔn)
//同時(shí),該屬性還支持html格式字符串
//eg:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f'
},
// LogAxisRenderer(指數(shù)渲染器)
// 該渲染器只有兩個(gè)屬性, 指數(shù)渲染器通過axesDefaults和axes配置對(duì)象進(jìn)行配置
axesDefaults: {
base: 10, // 指數(shù)的底數(shù)
tickDistribution: 'even', // 坐標(biāo)軸顯示方式:'even' or 'power'. 'even' 產(chǎn)生的是均勻分布于坐標(biāo)
//軸上的坐標(biāo)刻度值 。而'power' 則是根據(jù)不斷增大的增數(shù)來確定坐標(biāo)軸上的刻度
},
// PieRenderer(設(shè)置餅狀圖的OPtion對(duì)象)
// 餅狀圖通過seriesDefaults和series配置對(duì)象進(jìn)行配置
seriesDefaults: {
rendererOptions: {
diameter: undefined, // 設(shè)置餅的直徑
padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離,變相該表餅的直徑
sliceMargin: 20, // 餅的每個(gè)部分之間的距離
fill:true, // 設(shè)置餅的每部分被填充的狀態(tài)
shadow:true, //為餅的每個(gè)部分的邊框設(shè)置陰影,以突出其立體效果
shadowOffset: 2, //設(shè)置陰影區(qū)域偏移出餅的每部分邊框的距離
shadowDepth: 5, // 設(shè)置陰影區(qū)域的深度
shadowAlpha: 0.07 // 設(shè)置陰影區(qū)域的透明度
}
},
//pointLabels(數(shù)據(jù)點(diǎn)標(biāo)簽)
//用于在數(shù)據(jù)點(diǎn)所在位置顯示相關(guān)信息(非提示框性質(zhì))
seriesDefaults: {
pointLabels: {
location:'s',//數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)點(diǎn)附近的方位
ypadding:2 //數(shù)據(jù)標(biāo)簽距數(shù)據(jù)點(diǎn)在縱軸方向上的距離
}
}
// Trendline(趨勢(shì)線)
// 餅狀圖通過seriesDefaults和series配置對(duì)象進(jìn)行配置
seriesDefaults: {
trendline: {
show: true, // 是否顯示趨勢(shì)線
color: '#666666', // 趨勢(shì)線顏色
label: '', // 趨勢(shì)線名稱
type: 'linear', //趨勢(shì)線類型'linear'(直線), 'exponential'(冪值數(shù)線) or 'exp'
shadow: true, // 同grid相同屬性設(shè)置
lineWidth: 1.5, // 趨勢(shì)線寬度
shadowAngle: 45, // 同grid相同屬性設(shè)置
shadowOffset: 1.5, // 同grid相同屬性設(shè)置
shadowDepth: 3, // 同grid相同屬性設(shè)置
shadowAlpha: 0.07 // 同grid相同屬性設(shè)置
}
}
}
后邊我會(huì)講解其用法和簡(jiǎn)單的舉例。
jqPlot是一款基于jquery類庫(kù)的圖標(biāo)繪制插件。通過jqPlot可以再網(wǎng)頁中繪制線狀、柱狀、餅狀等多種樣式圖表。而且,jqPlot具有插件可擴(kuò)展性(Pluggability),你可以編寫自己的圖表樣式。
官方地址:http://www.jqplot.com/
功能概述:
有多種圖表樣式可供選擇
可以自定義日期軸線
可設(shè)置旋轉(zhuǎn)軸文字
自動(dòng)計(jì)算趨勢(shì)線
工具條提示和高亮數(shù)據(jù)點(diǎn)
默認(rèn)最優(yōu)設(shè)置,非常易于使用
以上功能在jqPlot主頁中的示例頁面有很多直觀的展示。這里是它詳細(xì)使用文檔。
缺點(diǎn):柱狀圖無法顯示具體數(shù)據(jù)值。餅狀圖無法顯示具體百分比。
下邊是搜集的詳細(xì)參數(shù)配置:
復(fù)制代碼 代碼如下:
options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默認(rèn)顯示的分類顏色,
//如果分類的數(shù)量超過這里的顏色數(shù)量,則從該隊(duì)列中第一個(gè)位置開始重新取值賦給相應(yīng)的分類
stackSeries: false, // 如果置為true并且有多個(gè)分類(如果是折線圖,就必須多于一條折線),
// 那么每個(gè)分類(折線)在縱軸上的值為其前所有分類縱軸值總和與其縱
//軸值相加值(eg,當(dāng)前分類縱軸值為Y3
//,其前有Y2,Y1,那么他顯示在Y軸上值為Y2+Y3+Y1,目前該屬性支持線圖和柱狀圖
title: '', //設(shè)置當(dāng)前圖的標(biāo)題
title: {
text: '', // 設(shè)置當(dāng)前圖的標(biāo)題
show: true,//設(shè)置當(dāng)前標(biāo)題是否顯示
},
axisDefaults: {
show: false, // wether or not to renderer the axis. Determined automatically.
min: null, // 橫(縱)坐標(biāo)顯示的最小值
max: null, // 橫(縱)坐標(biāo)顯示的最大值
pad: 1.2, // 一個(gè)相乘因子,
//(數(shù)據(jù)在橫(縱)軸上最大值-數(shù)據(jù)在橫(縱)軸上最小值)*pad值=該軸顯示的橫(縱)坐標(biāo)區(qū)間長(zhǎng)度
// 該軸顯示的橫(縱)坐標(biāo)區(qū)間長(zhǎng)度=橫(縱)坐標(biāo)顯示的最大值-橫(縱)坐標(biāo)顯示的最小值
//如果設(shè)置了max和min的值的話,那么會(huì)優(yōu)先考慮min和max設(shè)置的值
ticks: [], //設(shè)置橫(縱)坐標(biāo)的刻度上的值,可為該ticks數(shù)組中的值,
// a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
numberTicks: undefined, //一個(gè)相除因子,用于設(shè)置橫(縱)坐標(biāo)刻度間隔
//橫(縱)坐標(biāo)刻度間隔值=橫(縱)坐標(biāo)區(qū)間長(zhǎng)度/(numberTicks-1)
tickInterval:'', //橫(縱)坐標(biāo)刻度間隔值,可為日期字符串
renderer: $.jqplot.LinearAxisRenderer, // 設(shè)置橫(縱)軸上數(shù)據(jù)加載的渲染器,有dateAxisRenderer(參見本文最后相關(guān)介紹) 。
rendererOptions: {}, // 設(shè)置renderer的Option配置對(duì)象,線狀圖不需要設(shè)置
//不同圖表的Option配置對(duì)象請(qǐng)參見下面《jqPlot各個(gè)不同插件的Option對(duì)象設(shè)置》
//中各個(gè)圖表的配置Option對(duì)象
tickOptions: {
mark: 'outside', // 設(shè)置橫(縱)坐標(biāo)刻度在坐標(biāo)軸上顯示方式,分為坐標(biāo)軸內(nèi),外,穿過坐標(biāo)軸顯示
// 值也分為:'outside', 'inside' 和 'cross',
showMark: true, //設(shè)置是否顯示刻度
showGridLine: true, // 是否在圖表區(qū)域顯示刻度值方向的網(wǎng)格線
markSize: 4, // 每個(gè)刻度線頂點(diǎn)距刻度線在坐標(biāo)軸上點(diǎn)距離(像素為單位)
//如果mark值為 'cross', 那么每個(gè)刻度線都有上頂點(diǎn)和下頂點(diǎn),刻度線與坐標(biāo)軸
//在刻度線中間交叉,那么這時(shí)這個(gè)距離×2,
show: true, // 是否顯示刻度線,與刻度線同方向的網(wǎng)格線,以及坐標(biāo)軸上的刻度值
showLabel: true, // 是否顯示刻度線以及坐標(biāo)軸上的刻度值
formatString: '', // 梃置坐標(biāo)軸上刻度值顯示格式,eg:'%b %#d, %Y'表示格式"月 日,年","AUG 30,2008"
fontSize:'10px', //刻度值的字體大小
fontFamily:'Tahoma', //刻度值上字體
angle:40, //刻度值與坐標(biāo)軸夾角,角度為坐標(biāo)軸正向順時(shí)針方向
fontWeight:'normal', //字體的粗細(xì)
fontStretch:1//刻度值在所在方向(坐標(biāo)軸外)上的伸展(拉伸)度
}
showTicks: true, /// 是否顯示刻度線以及坐標(biāo)軸上的刻度值
showTickMarks: true, //設(shè)置是否顯示刻度
useSeriesColor: true //如果有多個(gè)縱(橫)坐標(biāo)軸,通過該屬性設(shè)置這些坐標(biāo)軸是否以不同顏色顯示
},
axes: {
xaxis: {
// 設(shè)置同 axisDefaults
},
yaxis: {
// 設(shè)置同 axisDefaults
},
x2axis: {
// 設(shè)置同 axisDefaults
},
y2axis: {
// 設(shè)置同 axisDefaults
}
},
seriesDefaults: {//如果有多個(gè)分類,這可通過該配置屬性設(shè)置各個(gè)分類的共性屬性
show: true, // 設(shè)置是否渲染整個(gè)圖表區(qū)域(即顯示圖表中內(nèi)容)
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // 用于顯示在分類名稱框中的分類名稱
color: '', // 分類在圖標(biāo)中表示(折現(xiàn),柱狀圖等)的顏色
lineWidth: 2.5, // 分類圖(特別是折線圖)哪寬度
shadow: true, // 各圖在圖表中是否顯示陰影區(qū)域
shadowAngle: 45, // 參考grid中相同參數(shù)
shadowOffset: 1.25, // 參考grid中相同參數(shù)
shadowDepth: 3, // 參考grid中相同參數(shù)
shadowAlpha: 0.1, // 參考grid中相同參數(shù)
showLine: true, //是否顯示圖表中的折線(折線圖中的折線)
showMarker: true, // 是否強(qiáng)調(diào)顯示圖中的數(shù)據(jù)節(jié)點(diǎn)
fill: false, // 是否填充圖表中折線下面的區(qū)域(填充顏色同折線顏色)以及l(fā)egend
//設(shè)置的分類名稱框中分類的顏色,此處注意的是如果fill為true,
//那么showLine必須為true,否則不會(huì)顯示效果
fillAndStroke: false, //在fill為true的狀態(tài)下,在填充區(qū)域最上面顯示一條線(如果是折線圖則顯示該折線)
fillColor: undefined, // 設(shè)置填充區(qū)域的顏色
fillAlpha: undefined, // 梃置填充區(qū)域的透明度
renderer: $.jqplot.PieRenderer, // 利用渲染器(這里是利用餅圖PieRenderer)渲染現(xiàn)有圖表
//,從而轉(zhuǎn)換成所需圖表
rendererOptions: {}, // 傳給上個(gè)屬性所設(shè)置渲染器的option對(duì)象,線狀圖的渲染器沒有option對(duì)象,
//不同圖表的Option配置對(duì)象請(qǐng)參見下面《jqPlot各個(gè)不同插件的Option對(duì)象設(shè)置》
//中各個(gè)圖表的配置Option對(duì)象
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
// point markers.
markerOptions: {
show: true, // 是否在圖中顯示數(shù)據(jù)點(diǎn)
style: 'filledCircle', // 各個(gè)數(shù)據(jù)點(diǎn)在圖中顯示的方式,默認(rèn)是"filledCircle"(實(shí)心圓點(diǎn)),
//其他幾種方式circle,diamond, square, filledCircle,
// filledDiamond or filledSquare.
lineWidth: 2, // 數(shù)據(jù)點(diǎn)各個(gè)的邊的寬度(如果設(shè)置過大,各個(gè)邊會(huì)重復(fù),會(huì)顯示的類似于實(shí)心點(diǎn))
size: 9, // 數(shù)據(jù)點(diǎn)的大小
color: '#666666' // 數(shù)據(jù)點(diǎn)的顏色
shadow: true, // 是否為數(shù)據(jù)點(diǎn)顯示陰影區(qū)(增加立體效果)
shadowAngle: 45, // 陰影區(qū)角度,x軸順時(shí)針方向
shadowOffset: 1, // 參考grid中相同參數(shù)
shadowDepth: 3, //參考grid中相同參數(shù)
shadowAlpha: 0.07 // 參考grid中相同參數(shù)
}
isDragable: true,//是否允許拖動(dòng)(如果dragable包已引入),默認(rèn)可拖動(dòng)
},
series:[//如果有多個(gè)分類需要顯示,這在此處設(shè)置各個(gè)分類的相關(guān)配置屬性
//eg.設(shè)置各個(gè)分類在分類名稱框中的分類名稱
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]
//配置參數(shù)設(shè)置同seriesDefaults
],
legend: {
show: false,//設(shè)置是否出現(xiàn)分類名稱框(即所有分類的名稱出現(xiàn)在圖的某個(gè)位置)
location: 'ne', // 分類名稱框出現(xiàn)位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 分類名稱框距圖表區(qū)域上邊框的距離(單位px)
yoffset: 12, // 分類名稱框距圖表區(qū)域左邊框的距離(單位px)
background:'' //分類名稱框距圖表區(qū)域背景色
textColor:'' //分類名稱框距圖表區(qū)域內(nèi)字體顏色
..其他關(guān)于樣式設(shè)計(jì)參考官方文檔
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc' // 設(shè)置整個(gè)圖標(biāo)區(qū)域網(wǎng)格背景線的顏色
background: '#fffdf6', // 設(shè)置整個(gè)圖表區(qū)域的背景色
borderColor: '#999999', // 設(shè)置圖表的(最外側(cè))邊框的顏色
borderWidth: 2.0, //設(shè)置圖表的(最外側(cè))邊框?qū)挾?
shadow: true, // 為整個(gè)圖標(biāo)(最外側(cè))邊框設(shè)置陰影,以突出其立體效果
shadowAngle: 45, // 設(shè)置陰影區(qū)域的角度,從x軸順時(shí)針方向旋轉(zhuǎn)
shadowOffset: 1.5, // 設(shè)置陰影區(qū)域偏移出圖片邊框的距離
shadowWidth: 3, // 設(shè)置陰影區(qū)域的寬度
shadowDepth: 3, // 設(shè)置影音區(qū)域重疊陰影的數(shù)量
shadowAlpha: 0.07 // 設(shè)置陰影區(qū)域的透明度
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各個(gè)不同插件的Option對(duì)象設(shè)置******************************/
// BarRenderer(設(shè)置柱狀圖的Option對(duì)象)
//該Option對(duì)象適用與柱狀圖的series和seriesDefault屬性的相關(guān)配置對(duì)象設(shè)置
seriesDefaults: {
rendererOptions: {
barPadding: 8, //設(shè)置同一分類兩個(gè)柱狀條之間的距離(px)
barMargin: 10, //設(shè)置不同分類的兩個(gè)柱狀條之間的距離(px)(同一個(gè)橫坐標(biāo)表點(diǎn)上)
barDirection: 'vertical', //設(shè)置柱狀圖顯示的方向:垂直顯示和水平顯示
//,默認(rèn)垂直顯示 vertical or horizontal.
barWidth: null, // 設(shè)置柱狀圖中每個(gè)柱狀條的寬度
shadowOffset: 2, // 同grid相同屬性設(shè)置
shadowDepth: 5, // 同grid相同屬性設(shè)置
shadowAlpha: 0.8, // 同grid相同屬性設(shè)置
}
},
// Cursor(光標(biāo))
// 鼠標(biāo)移動(dòng)到圖中時(shí),鼠標(biāo)在圖中顯示形式,常與和高亮功能同時(shí)使用
//此外,通過設(shè)置該屬性的zoom相關(guān)屬性來對(duì)圖中某個(gè)區(qū)域鉆?。ň瓦x定區(qū)域放大)
//該配置對(duì)象直接在option下配置
cursor: {
style: 'crosshair', //當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí),鼠標(biāo)的顯示樣式,該屬性值為css類
show: true, //是否顯示光標(biāo)
showTooltip: true, // 是否顯示提示信息欄
followMouse: false, //光標(biāo)的提示信息欄是否隨光標(biāo)(鼠標(biāo))一起移動(dòng)
tooltipLocation: 'se', // 光標(biāo)提示信息欄的位置設(shè)置。如果followMouse=true,那么該位置為
//提示信息欄相對(duì)于光標(biāo)的位置。否則,為光標(biāo)提示信息欄在圖標(biāo)中的位置
// 該屬性可選值: n, ne, e, se, etc.
tooltipOffset: 6, //提示信息欄距鼠標(biāo)(followMouse=true)或坐標(biāo)軸(followMouse=false)的位置
showTooltipGridPosition: false,//是否在信息提示欄中顯示光標(biāo)位置(取其據(jù)圖標(biāo)左和上邊緣線像素距離)
showTooltipUnitPosition: true,// 是否顯示提示光標(biāo)所在位置(取其在橫縱軸上數(shù)據(jù)值)的信息欄
//注:注意此處與showTooltipGridPosition值區(qū)別,前者顯示坐標(biāo)值,該處顯示的是數(shù)據(jù)值
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(拖動(dòng))
//該配置對(duì)象通過seriesDefaults和series配置對(duì)象進(jìn)行配置
seriesDefaults: {
dragable: {
color: undefined, // 當(dāng)拖動(dòng)數(shù)據(jù)點(diǎn)是,拖動(dòng)線與拖動(dòng)數(shù)據(jù)點(diǎn)顏色
constrainTo: 'none', //設(shè)置拖動(dòng)的的范圍: 'x'(只能在橫向上拖動(dòng)),
// 'y'(只能在縱向上拖動(dòng)), or 'none'(無限制).
},
},
// Highlighter(高亮)
//設(shè)置高亮動(dòng)作option屬性對(duì)象
//鼠標(biāo)移動(dòng)到某個(gè)數(shù)據(jù)點(diǎn)上時(shí),該數(shù)據(jù)點(diǎn)增大并顯示提示信息框
//該配置對(duì)象直接在option下配置
highlighter: {
lineWidthAdjust: 2.5, //當(dāng)鼠標(biāo)移動(dòng)到放大的數(shù)據(jù)點(diǎn)上時(shí),設(shè)置增大的數(shù)據(jù)點(diǎn)的寬度
// 目前僅適用于非實(shí)心數(shù)據(jù)點(diǎn)
sizeAdjust: 5, // 當(dāng)鼠標(biāo)移動(dòng)到數(shù)據(jù)點(diǎn)上時(shí),數(shù)據(jù)點(diǎn)擴(kuò)大的增量增量
showTooltip: true, // 是否顯示提示信息欄
tooltipLocation: 'nw', // 提示信息顯示位置(英文方向的首寫字母): n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // 設(shè)置提示信息欄出現(xiàn)和消失的方式(是否淡入淡出)
tooltipFadeSpeed: "fast"http://設(shè)置提示信息欄淡入淡出的速度: slow, def, fast, 或者是一個(gè)毫秒數(shù)的值.
tooltipOffset: 2, // 提示信息欄據(jù)被高亮顯示的數(shù)據(jù)點(diǎn)的偏移位置,以像素計(jì)。
tooltipAxes: 'both', // 提示信息框顯示數(shù)據(jù)點(diǎn)那個(gè)坐標(biāo)軸上的值,目前有橫/縱/橫縱三種方式。
//值分別為 x, y or xy.
tooltipSeparator: ', ' // 提示信息欄不同值之間的間隔符號(hào)
useAxesFormatters: true // 提示信息框中數(shù)據(jù)顯示的格式是否和該數(shù)據(jù)在坐標(biāo)軸上顯示格式一致
tooltipFormatString: '%.5P' // 用于設(shè)置提示信息框中數(shù)據(jù)顯示的格式,前提條件是useAxesFormatters
// 為false. 此時(shí)信息提示框中數(shù)據(jù)格式不再與坐標(biāo)軸一致,而是以此為準(zhǔn)
//同時(shí),該屬性還支持html格式字符串
//eg:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f'
},
// LogAxisRenderer(指數(shù)渲染器)
// 該渲染器只有兩個(gè)屬性, 指數(shù)渲染器通過axesDefaults和axes配置對(duì)象進(jìn)行配置
axesDefaults: {
base: 10, // 指數(shù)的底數(shù)
tickDistribution: 'even', // 坐標(biāo)軸顯示方式:'even' or 'power'. 'even' 產(chǎn)生的是均勻分布于坐標(biāo)
//軸上的坐標(biāo)刻度值 。而'power' 則是根據(jù)不斷增大的增數(shù)來確定坐標(biāo)軸上的刻度
},
// PieRenderer(設(shè)置餅狀圖的OPtion對(duì)象)
// 餅狀圖通過seriesDefaults和series配置對(duì)象進(jìn)行配置
seriesDefaults: {
rendererOptions: {
diameter: undefined, // 設(shè)置餅的直徑
padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離,變相該表餅的直徑
sliceMargin: 20, // 餅的每個(gè)部分之間的距離
fill:true, // 設(shè)置餅的每部分被填充的狀態(tài)
shadow:true, //為餅的每個(gè)部分的邊框設(shè)置陰影,以突出其立體效果
shadowOffset: 2, //設(shè)置陰影區(qū)域偏移出餅的每部分邊框的距離
shadowDepth: 5, // 設(shè)置陰影區(qū)域的深度
shadowAlpha: 0.07 // 設(shè)置陰影區(qū)域的透明度
}
},
//pointLabels(數(shù)據(jù)點(diǎn)標(biāo)簽)
//用于在數(shù)據(jù)點(diǎn)所在位置顯示相關(guān)信息(非提示框性質(zhì))
seriesDefaults: {
pointLabels: {
location:'s',//數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)點(diǎn)附近的方位
ypadding:2 //數(shù)據(jù)標(biāo)簽距數(shù)據(jù)點(diǎn)在縱軸方向上的距離
}
}
// Trendline(趨勢(shì)線)
// 餅狀圖通過seriesDefaults和series配置對(duì)象進(jìn)行配置
seriesDefaults: {
trendline: {
show: true, // 是否顯示趨勢(shì)線
color: '#666666', // 趨勢(shì)線顏色
label: '', // 趨勢(shì)線名稱
type: 'linear', //趨勢(shì)線類型'linear'(直線), 'exponential'(冪值數(shù)線) or 'exp'
shadow: true, // 同grid相同屬性設(shè)置
lineWidth: 1.5, // 趨勢(shì)線寬度
shadowAngle: 45, // 同grid相同屬性設(shè)置
shadowOffset: 1.5, // 同grid相同屬性設(shè)置
shadowDepth: 3, // 同grid相同屬性設(shè)置
shadowAlpha: 0.07 // 同grid相同屬性設(shè)置
}
}
}
后邊我會(huì)講解其用法和簡(jiǎn)單的舉例。
相關(guān)文章
基于jquery實(shí)現(xiàn)輪播焦點(diǎn)圖插件
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)輪播焦點(diǎn)圖插件,具有一定的參考價(jià)值,代碼很詳細(xì),感興趣的小伙伴們可以參考一下2016-03-03jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實(shí)現(xiàn)
jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實(shí)現(xiàn)2010-04-04jQuery AJAX 調(diào)用WebService實(shí)現(xiàn)代碼
用jQuery調(diào)用其他項(xiàng)目的WebService的代碼,需要的朋友可以參考下。2010-03-03jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新
這篇文章主要介紹了jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jquery給圖片添加鼠標(biāo)經(jīng)過時(shí)的邊框效果
鼠標(biāo)經(jīng)過時(shí)圖片產(chǎn)生塌陷,實(shí)則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-11-11jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格行動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02