一、關於jqplot
jqplot是一個十分強大的jQuery繪制圖表的插件，支持折線圖、柱狀圖、餅圖等等多種形態。其官方網址為：http://www.jqplot.com/
源代碼托管在bitbucket上：https://bitbucket.org/cleonello/jqplot/
由於其文檔寫的十分ugly，所以給使用增加了不少難度。本文試圖對其使用作一梳理。文中所用案例來源於互聯網。
二、簡單示例 - 繪制餅狀圖
jqplot是基於一個基本的jqplot.js文件，並有多個js文件支持的插件——也就是說jqplot.js文件只能支持線狀圖的繪制，對於餅狀圖，柱狀圖等圖形需要引入pieRenderer.js等文件。
這里參照jqPlot的官方文檔，以餅狀圖為例簡單的說一下jqPlot的用法：
第一步，引入js文件（如果是畫線狀圖之外的其他圖表，需要引入相關js文件，這里引入餅狀圖文件pieRenderer）
<!--[if lt IE 9]> <script src="js/excanvas.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> <script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script>
第二步，增加一個圖表展示區域的容器
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div>
第三步，獲取數據
line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]];
第四步，配置Option對象，並創建圖表
$.jqplot('chart', [line1], {
title:'pieRenderer ',//設置餅狀圖的標題
seriesDefaults: {fill: true,
showMarker: false,
shadow: false,
renderer:$.jqplot.PieRenderer,
rendererOptions:{
diameter: undefined, // 設置餅的直徑
padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑
sliceMargin: 9, // 餅的每個部分之間的距離
fill:true, // 設置餅的每部分被填充的狀態
shadow:true, //為餅的每個部分的邊框設置陰影，以突出其立體效果
shadowOffset: 2, //設置陰影區域偏移出餅的每部分邊框的距離
shadowDepth: 5, // 設置陰影區域的深度
shadowAlpha: 0.07 // 設置陰影區域的透明度
}
},
legend:{
show: true,//設置是否出現分類名稱框（即所有分類的名稱出現在圖的某個位置）
location: 'ne', // 分類名稱框出現位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 分類名稱框距圖表區域上邊框的距離（單位px）
yoffset: 12, // 分類名稱框距圖表區域左邊框的距離(單位px)
}
});
完整的代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Simple Test</title> <!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]--> <link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> <script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]]; plot1 = $.jqplot('chart', [line1], { title:'pieRenderer ',//設置餅狀圖的標題 seriesDefaults: {fill: true, showMarker: false, shadow: false, renderer:$.jqplot.PieRenderer, rendererOptions:{ diameter: undefined, // 設置餅的直徑 padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑 sliceMargin: 9, // 餅的每個部分之間的距離 fill:true, // 設置餅的每部分被填充的狀態 shadow:true, //為餅的每個部分的邊框設置陰影，以突出其立體效果 shadowOffset: 2, //設置陰影區域偏移出餅的每部分邊框的距離 shadowDepth: 5, // 設置陰影區域的深度 shadowAlpha: 0.07 // 設置陰影區域的透明度 } }, legend:{ show: true,//設置是否出現分類名稱框（即所有分類的名稱出現在圖的某個位置） location: 'ne', // 分類名稱框出現位置, nw, n, ne, e, se, s, sw, w. xoffset: 12, // 分類名稱框距圖表區域上邊框的距離（單位px） yoffset: 12, // 分類名稱框距圖表區域左邊框的距離(單位px) } }); }); </script> </head> <body> <div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div> </body> </html>
生成圖表展示如下：
三、jqPlot的Option配置對象詳解
options = { seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", "#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: { // 設置同 axisDefaults }, 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' // 設置整個圖標區域網格背景線的顏色 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.dateAxisRenderer
相關引用包：<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js" />
該渲染器主要用於顯示刻度為日期格式的坐標軸，它增強了javascript的本地數據處理能力，它幾乎支持所有的日期格式。
另外，該渲染器還提供了強大的格式化功能，它能將數據中日期字符串格式化為你需要的格式並顯示在坐標軸的刻度線上。
2.categoryAxisRenderer
相關引用包：<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js" />
該渲染器主要用於將顯示於刻度處的值顯示與兩個刻度之間，當然其表達意思也發生變化，因為刻度值處值表示某個點處的值，而它則代表某個范圍內的值。
該渲染器比較適合與柱狀圖聯合使用。
3.barRenderer
相關引用包：<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js" />
該渲染器主要用於顯示柱狀圖，該渲染器能夠很好的控制每個組（位於一個刻度值處的各個分類）內及組間距離，並且該柱狀圖能夠水平顯示。
4.cursor
相關引用包：<script type="text/javascript" src="../plugins/jqplot.cursor.min.js" /
該渲染器主要用於鼠標移動到圖中時，鼠標在圖中顯示形式，常用與和高亮功能同時使用。
該渲染器相關引用包一旦引用到當前頁面會，該渲染器立即生效。
5.highlighter
相關引用包：<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js" />
該渲染器主要用於當鼠標移動到圖中數據點上時，在鼠標附近顯示提示欄，並將相關信息顯示在提示欄。默認顯示值是橫縱坐標軸刻度值。當然，提示框中信息是可以根據自身需要定制的。
該渲染器相關引用包一旦引用到當前頁面會，該渲染器立即生效。
6.logAxisRenderer
相關引用包：<script type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js" />
該渲染器主要用於以指數計算的方式生成坐標軸上刻度值。默認情況下，刻度值是均勻顯示的，但是刻度值也可以按指數增長的方式顯示。
7.ohlcRenderer
相關引用包：<script type="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js" />
該渲染器主要用於顯示甘特圖。通常情況下，該渲染器與dateAxisRenderer一起使用較多
8.dragable
相關引用包：<script type="text/javascript" src="../plugins/jqplot.dragable.min.js" />
通過該渲染器，用戶能夠拖動某個數據點，jqplot會自動重畫拖動后的新圖表。同時，被拖動的數據點的數據值也隨着拖動發生變化。
9.trendline
相關引用包：<script type="text/javascript" src="../plugins/jqplot.trendline.min.js" />
該渲染器主要用於對現有數據進行線性回歸計算，並自動將計算結果以趨勢線的形式展示出來，當用戶拖動某個數據點時，趨勢線亦隨用戶拖動而變化。
10.pointLabels
相關引用包：<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js" />
該渲染器主要用於將數據節點相關的的信息以標簽的方式放於該數據節點附近；對於相應數據為空的，其標簽不顯示。