8月易用jQuery插件推薦:jqPlot畫(huà)圖插件
原創(chuàng)作者：佚名
jqPlot是一款基于jquery類庫(kù)的圖標(biāo)繪制插件。通過(guò)jqPlot可以再網(wǎng)頁(yè)中繪制線狀、柱狀、餅狀等多種樣式圖表。而且，jqPlot具有插件可擴(kuò)展性(Pluggability)，你可以編寫自己的圖表樣式。
這篇文章我們來(lái)學(xué)一個(gè)具有易用性+兼容性+可擴(kuò)展性的JavaScript圖表插件。
jqPlot是一款基于jquery類庫(kù)的圖標(biāo)繪制插件。通過(guò)jqPlot可以再網(wǎng)頁(yè)中繪制線狀、柱狀、餅狀等多種樣式圖表。而且，jqPlot具有插件可擴(kuò)展性(Pluggability)，你可以編寫自己的圖表樣式。
功能概述：
◆ 有多種圖表樣式可供選擇
◆ 可以自定義日期軸線
◆ 可設(shè)置旋轉(zhuǎn)軸文字
◆ 自動(dòng)計(jì)算趨勢(shì)線
◆ 工具條提示和高亮數(shù)據(jù)點(diǎn)
◆ 默認(rèn)***設(shè)置，非常易于使用
以上功能在jqPlot主頁(yè)中的示例頁(yè)面有很多直觀的展示。這里是它詳細(xì)使用文檔。
缺點(diǎn)：柱狀圖無(wú)法顯示具體數(shù)據(jù)值。餅狀圖無(wú)法顯示具體百分比。
下邊是搜集的詳細(xì)參數(shù)配置：
- options =
- {
- seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
- "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默認(rèn)顯示的分類顏色，
- //如果分類的數(shù)量超過(guò)這里的顏色數(shù)量，則從該隊(duì)列中***個(gè)位置開(kāi)始重新取值賦給相應(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（參見(jiàn)本文***相關(guān)介紹） 。
- rendererOptions: {}, // 設(shè)置renderer的Option配置對(duì)象，線狀圖不需要設(shè)置
- //不同圖表的Option配置對(duì)象請(qǐng)參見(jiàn)下面《jqPlot各個(gè)不同插件的Option對(duì)象設(shè)置》
- //中各個(gè)圖表的配置Option對(duì)象
- tickOptions: {
- mark: 'outside', // 設(shè)置橫（縱）坐標(biāo)刻度在坐標(biāo)軸上顯示方式，分為坐標(biāo)軸內(nèi)，外，穿過(guò)坐標(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í)針?lè)较?nbsp;
- fontWeight:'normal', //字體的粗細(xì)
- fontStretch:1//刻度值在所在方向（坐標(biāo)軸外）上的伸展(拉伸)度
- }
- showTicks: true, /// 是否顯示刻度線以及坐標(biāo)軸上的刻度值
- showTickMarks: true, //設(shè)置是否顯示刻度
- useSeriesColor: true //如果有多個(gè)縱（橫）坐標(biāo)軸，通過(guò)該屬性設(shè)置這些坐標(biāo)軸是否以不同顏色顯示
- },
- axes: {
- xaxis: {
- // 設(shè)置同 axisDefaults
- },
- yaxis: {
- // 設(shè)置同 axisDefaults
- },
- x2axis: {
- // 設(shè)置同 axisDefaults
- },
- y2axis: {
- // 設(shè)置同 axisDefaults
- }
- },
- seriesDefaults: {//如果有多個(gè)分類，這可通過(guò)該配置屬性設(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ì)象，線狀圖的渲染器沒(méi)有option對(duì)象，
- //不同圖表的Option配置對(duì)象請(qǐng)參見(jiàn)下面《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è)置過(guò)大，各個(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í)針?lè)较?nbsp;
- 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ū)挾?nbsp;
- shadow: true, // 為整個(gè)圖標(biāo)（最外側(cè)）邊框設(shè)置陰影，以突出其立體效果
- shadowAngle: 45, // 設(shè)置陰影區(qū)域的角度，從x軸順時(shí)針?lè)较蛐D(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í)使用
- //此外，通過(guò)設(shè)置該屬性的zoom相關(guān)屬性來(lái)對(duì)圖中某個(gè)區(qū)域鉆取（就選定區(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ì)象通過(guò)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'（無(wú)限制）.
- },
- },
- // 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"//設(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ù)渲染器通過(guò)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ù)來(lái)確定坐標(biāo)軸上的刻度
- },
- // PieRenderer(設(shè)置餅狀圖的OPtion對(duì)象)
- // 餅狀圖通過(guò)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ì)線）
- // 餅狀圖通過(guò)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è)置
- }
- }
- }
下頁(yè)是6個(gè)超贊超實(shí)用的免費(fèi)jQuery圖片插件
#p#
1、Slides
Slides是一個(gè)簡(jiǎn)單的SlideShow插件。包含循環(huán)播放，自動(dòng)播放，過(guò)渡動(dòng)畫(huà)，圖片預(yù)加載，自動(dòng)生成頁(yè)碼等功能。
下載地址：http://www.slidesjs.com/
2、Face Detection
正如它的名字，這個(gè)插件用來(lái)標(biāo)示圖片中的人物
下載地址：http://facedetection.jaysalvat.com/
3、AviaSlider
AviaSlider 是一個(gè)包含唯一過(guò)渡效果的Slide插件
下載地址：http://aviathemes.com/aviaslider/
4、Fullscreenr
你想在你的網(wǎng)站中的背景圖片始終填滿屏幕并且保持縱橫比嗎？那么，This plugin does that.
下載地址：http://nanotux.com/blog/fullscreen/
5、jQuery Easy Slides
Easy Slides 同樣是一款輕量級(jí)的Slide插件（Javascript CSS 加一起就2.1kb），并且易于使用
下載地址：http://dev.daledavies.co.uk/easyslides/
6、Slidy
jQuery Slidy is a plugin that generates a customizable transitions automatically.
下載地址：http://www.wbotelhos.com/slidy/
【編輯推薦】
責(zé)任編輯：陳貽新
來(lái)源：
網(wǎng)絡(luò)整理
