Jquery圖形報表外掛 jqplot簡介及參數詳解_jquery

功能概述：

有多種圖表樣式可供選擇
可以自訂日期軸線
可設定旋轉軸文字
自動計算趨勢線
工具列提示和高亮數據點
預設最優設置，非常易於使用
以上功能在jqPlot主頁中的範例頁面有很多直覺的展示。這裡是它詳細使用文件。

缺點：長條圖無法顯示具體資料值。餅狀圖無法顯示具體百分比。

下邊是蒐集的詳細參數配置：

複製程式碼 程式碼如下:

options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#95812", " >"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 預設顯示的分類顏色，
//如果分類的數量超過這裡的顏色數量，則從該佇列中第一個位置開始重新取值賦給對應的分類
stackSeries: false, // 如果置為true且有多個分類（如果是折線圖，就必須多於一條折線），
// 那麼每個分類（折線）在縱軸上的值為其前所有分類縱軸值總和與其縱
//軸值相加值（eg,當前分類縱軸值為Y3
//，其前有Y2,Y1，那麼他顯示在Y軸上值為Y2 Y3 Y1,目前該屬性支持線圖和柱狀圖
title: '', //設定當前圖的標題
title: {
text: '', // 設定目前圖表的標題
show: true,//設定目前標題是否顯示
},
axisDefaults: {
show: false, // wether or not to renderer the axis. Determined automatically.
min: null, // 橫（縱）座標顯示的最小值
max: null, // 橫（縱）座標顯示的最大值
pad: 1.2, // 一個相乘因子，
//（資料在橫（縱）軸上最大值-資料在橫（縱）軸上最小值）*pad值=此軸顯示的橫（縱）座標區間長度
// 此軸顯示的橫（縱）座標區間長度=橫（縱）座標顯示的最大值-橫（縱）座標顯示的最小值
//如果設定了max和min的值的話，那麼會優先考慮min和max設定的值
ticks: [], //設定橫（縱）座標的刻度上的值，可為該ticks數組中的值，
// a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
numberTicks: undefined, //一個相除因子，用來設定橫（縱）座標刻度間隔
//橫（縱）座標刻度間隔值=橫（縱）座標區間長度/(numberTicks-1)
tickInterval:'', //橫（縱）座標刻度間隔值，可為日期字串
renderer: $.jqplot.LinearAxisRenderer, // 設定橫（縱）軸上資料載入的渲染器,有dateAxisRenderer（請參閱本文最後相關介紹） 。
rendererOptions: {}, // 設定renderer的Option配置對象，線狀圖不需要設定
//不同圖表的Option配置對象請參考下面《jqPlot各個不同插件的Option對象設定》
//中各圖表的配置Option物件
tickOptions: {
mark: 'outside', // 設定橫（縱）座標刻度在座標軸上顯示方式，分為座標軸內，外，穿過座標軸顯示
// 值也分為：'outside', 'inside' 和'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: {
// 設定同axisDefaults
},
yaxis: {
// 設定同5axisDefaults
},
x2axis: {
// 設定同axisDefaults
},
y2axis: {
// 設定同axisDefaults
}
}
} >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, // 參考grid中相同參數
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' /#cccccc' /#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:>rendererOptions: {
barPadding: 8, //設定同一分類兩個柱狀條之間的距離（px）
barMargin: 10, //設定兩個不同分類的柱狀條之間的距離（px）（同一個橫座標表點上）
barDirection: 'vertical', //設定柱狀圖顯示的方向：垂直顯示和水平顯示
//，預設垂直顯示vertical or horizo​​ntal.
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: [Aspect], // show onify inject mot opet specject :
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes
// combinations with for the series in the plot are shown.

},

// Dragable（拖曳）
//此設定物件透過seriesDefaults和series設定物件進行設定
seriesDefaults: {
dragable物件進行設定
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:'hello %.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相同屬性設定
}