本來打算繼續研究Google Charts，但上頭下了指示讓看jqplot，無奈，只好先將Google Charts放一放，不過真心覺得Google Charts不錯，現在先開始jqplot。
jqPlot是一個jQuery繪圖插件，可以利用它制作漂亮的線狀圖和柱狀圖。jqPlot支持為圖表設置各種不同的樣式。提供Tooltips，數據點高亮顯示等功能。
看一個簡單的例子
<!DOCTYPE html> <html> <head> <title>Line Charts</title> <!-- 引入jqplot的CSS--> <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> <!-- 引入jquery--> <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="chart1" style="height:300px; width:500px;"></div> <script class="code" type="text/javascript"> $(document).ready(function(){ // 調用jqplot函數生成圖表 var plot1 = $.jqplot ('chart1', [[3,7,9,1,5,3,8,2,5]]); }); </script> <!-- 引入jqplot--> <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script> </body> </html>
效果如下
jqPlot整的來說有三個地方需要配置。格式如：
$.jqplot('target', data, options);
target：要顯示的位置，即要顯示為HTML元素的ID。
data：顯示的數據，一個數組的數組。
options：參數的配置項。
jqplot配置使用
參照官方文檔：http://www.jqplot.com/docs/files/usage-txt.html
配置參數（參考博客）
var options = { // 默認顯示的分類顏色，如果分類的數量超過這里的顏色數量，則從該隊列中第一個位置開始重新取值賦給相應的分類 seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // colors that will // be assigned to the series. If there are more series than colors, colors // will wrap around and start at the beginning again. // 如果置為true並且有多個分類（如果是折線圖，就必須多於一條折線）， // 那么每個分類（折線）在縱軸上的值為其前所有分類縱軸值總和與其縱，軸值相加值 // 例： 當前分類縱軸值為Y3,畫出的值為Y1+Y2+Y3 stackSeries: false, // if true, will create a stack plot. // Currently supported by line and bar graphs. //設置當前圖的標題 title: '', // Title for the plot. Can also be specified as an object like: title: { // 設置當前圖的標題 text: '', // title for the plot // 設置當前圖的標題是否顯示 show: true, }, axesDefaults: { // 是否自動顯示坐標軸 show: false, // 橫(縱)軸最小刻度值 min: null, // minimum numerical value of the axis. Determined automatically. // 橫(縱)軸最大刻度值 max: null, // maximum numverical value of the axis. Determined automatically. // 橫(縱)軸度值增漲因子 pad: 1.2, // a factor multiplied by the data range on the axis to give the // axis range so that data points don't fall on the edges of the axis. // 設置橫（縱）坐標的刻度上的值，可為該ticks數組中的值 ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...] // array of ticks to use. Computed automatically. // 一個相除因子，用於設置橫（縱）坐標刻度間隔，橫（縱）坐標刻度間隔值=橫（縱）坐標區間長度/(numberTicks-1) numberTicks: undefined, // 設置橫（縱）軸上數據加載的渲染器 renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis, // 設置renderer的Option配置對象，線狀圖不需要設置 rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer // has no options, tickOptions: { // 設置刻度在坐標軸上的顯示方式：分為:坐標軸外顯示，內顯示，和穿過顯示;其值分別為 'outside', 'inside' or 'cross' mark: 'outside', // Where to put the tick mark on the axis // 'outside', 'inside' or 'cross', // 設置是否顯示刻度 showMark: true, // 是否在圖表區域顯示刻度值方向的網格 showGridline: true, // wether to draw a gridline (across the whole grid) at this tick, // 每個刻度線頂點距刻度線在坐標軸上點距離（像素為單位)如果mark值為 'cross', // 那么每個刻度線都有上頂點和下頂點，刻度線與坐標軸在刻度線中間交叉，那么這時這個距離×2 markSize: 4, // length the tick will extend beyond the grid in pixels. For // 'cross', length will be added above and below the grid boundary, // 是否顯示刻度線，與刻度線同方向的網格線，以及坐標軸上的刻度值 show: true, // wether to show the tick (mark and label), // 是否顯示刻度線以及坐標軸上的刻度值 showLabel: true, // wether to show the text label at the tick, // 設置坐標軸上刻度值顯示格式，例:'%b %#d, %Y'表示格式"月 日，年"，"AUG 30,2008" formatString: '', // format string to use with the axis tick formatter // 刻度值的字體大小 fontSize: '10px', // 刻度值上字體 fontFamily: 'Tahoma', // 刻度值與坐標軸夾角，角度為坐標軸正向順時針方向 angle: 40, // 字體的粗細 fontWeight: 'normal', // 刻度值在所在方向（坐標軸外）上的伸展(拉伸)度 fontStretch: 1 } // 是否顯示刻度線以及坐標軸上的刻度值 showTicks: true, // wether or not to show the tick labels, // 設置是否顯示刻度 showTickMarks: true, // wether or not to show the tick marks // 如果有多個縱（橫）坐標軸，通過該屬性設置這些坐標軸是否以不同顏色顯示 useSeriesColor: true }, axes: { // 和axesDefaults中的參數相同 xaxis: { // same options as axesDefaults }, yaxis: { // same options as axesDefaults }, x2axis: { // same options as axesDefaults }, y2axis: { // same options as axesDefaults } }, // 如果有多個分類，這可通過該配置屬性設置各個分類的共性屬性 seriesDefaults: { // 設置是否渲染整個圖表區域（即顯示圖表中內容） show: true, // wether to render the series. xaxis: 'xaxis', // either 'xaxis' or 'x2axis'. yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. // 用於顯示在分類名稱框中的分類名稱 label: '', // label to use in the legend for this line. // 分類在圖標中表示（折現，柱狀圖等）的顏色 color: '', // CSS color spec to use for the line. Determined automatically. // 分類圖（特別是折線圖）的線寬 lineWidth: 2.5, // Width of the line in pixels. // 各圖在圖表中是否顯示陰影區域 shadow: true, // show shadow or not. // 設置陰影區域的角度，從x軸順時針方向旋轉 shadowAngle: 45, // angle (degrees) of the shadow, clockwise from x axis. // 設置陰影區域偏移出圖片邊框的距離 shadowOffset: 1.25, // offset from the line of the shadow. // 設置影音區域重疊陰影的數量 shadowDepth: 3, // Number of strokes to make when drawing shadow. Each // stroke offset by shadowOffset from the last. // 設置陰影的透明度 shadowAlpha: 0.1, // Opacity of the shadow. // 是否顯示圖表中的折線（折線圖中的折線） showLine: true, // whether to render the line segments or not. // 是否強調顯示圖中的數據節點 showMarker: true, // render the data point markers or not. // 是否填充圖表中折線下面的區域（填充顏色同折線顏色） fill: false, // fill under the line, // 在fill為true的狀態下，在填充區域最上面顯示一條線（如果是折線圖則顯示該折線） fillAndStroke: false, // *stroke a line at top of fill area. // 設置填充區域的顏色 fillColor: undefined, // *custom fill color for filled lines (default is line color). // 設置填充區域的透明度 fillAlpha: undefined, // *custom alpha to apply to fillColor. // 利用渲染器（這里是利用折線圖LineRenderer）渲染現有圖表，從而轉換成所需圖表 renderer: $.jqplot.LineRenderer], // renderer used to draw the series. // 傳給上個屬性所設置渲染器的option對象 rendererOptions: {}, // options passed to the renderer. LineRenderer has no options. markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data // point markers. markerOptions: { // 是否在圖中顯示數據點 show: true, // wether to show data point markers. // 各個數據點在圖中顯示的方式，默認是"filledCircle"(實心圓點), //其他幾種方式circle，diamond, square, filledCircle，filledDiamond or filledSquare. style: 'filledCircle', // circle, diamond, square, filledCircle. // filledDiamond or filledSquare. // 數據點各個的邊的寬度（如果設置過大，會顯示的類似於實心點） lineWidth: 2, // width of the stroke drawing the marker. // 數據點的大小 size: 9, // size (diameter, edge length, etc.) of the marker. // 數據點的顏色 color: '#666666' // color of marker, set to color of line by default. // 是否為數據點顯示陰影區（增加立體效果） shadow: true, // wether to draw shadow on marker or not. // 設置陰影區域的角度，從x軸順時針方向旋轉 shadowAngle: 45, // angle of the shadow. Clockwise from x axis. // 設置陰影區域偏移出圖片邊框的距離 shadowOffset: 1, // offset from the line of the shadow, // 設置陰影區域的寬度 shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke // offset by shadowOffset from the last. // 設置陰影區域的透明度 shadowAlpha: 0.07 // Opacity of the shadow }, //是否允許拖動（如果dragable包已引入）,默認可拖動 isDragable: true }, series:[ // 如果有多個分類需要顯示，這在此處設置各個分類的相關配置屬性 // 例：設置各個分類在分類名稱框中的分類名稱 // series:[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}] // 配置參數設置同seriesDefaults {Each series has same options as seriesDefaults}, {You can override each series individually here} ], legend: { // 設置是否出現分類名稱框（即所有分類的名稱出現在圖的某個位置） show: false, // 分類名稱框出現位置，ewsn分別代表東西南北， nw, n, ne, e, se, s, sw, w. location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w. // 分類名稱框距圖表區域與location指向的邊框的x軸距離（單位px），若location為n或s，則該值不起作用 xoffset: 12, // pixel offset of the legend box from the x (or x2) axis. // 分類名稱框距圖表區域與location指向的邊框的y軸的距離(單位px)，若location為w或e，則該值不起作用 yoffset: 12, // pixel offset of the legend box from the y (or y2) axis. // 分類名稱框距圖表區域背景色 background:'', // 分類名稱框距圖表區域內字體顏色 textColor:'' }, grid: { // 是否顯示網格線 drawGridLines: true, // wether to draw lines across the grid or not. // 設置整個圖標區域網格線的顏色 gridLineColor: '#cccccc' // *Color of the grid lines. // 設置整個圖表區域的背景色 background: '#fffdf6', // CSS color spec for background color of grid. // 設置圖表的(最外側)邊框的顏色 borderColor: '#999999', // CSS color spec for border around grid. // 設置圖表的（最外側）邊框寬度 borderWidth: 2.0, // pixel width of border around grid. // 為整個圖標（最外側）邊框設置陰影，以突出其立體效果 shadow: true, // draw a shadow for grid. // 設置陰影區域的角度，從x軸順時針方向旋轉 shadowAngle: 45, // angle of the shadow. Clockwise from x axis. // 設置陰影區域偏移出圖片邊框的距離 shadowOffset: 1.5, // offset from the line of the shadow. // 設置陰影區域的寬度 shadowWidth: 3, // width of the stroke for the shadow. // 設置影音區域重疊陰影的數量 shadowDepth: 3, // Number of strokes to make when drawing shadow. // Each stroke offset by shadowOffset from the last. // 設置陰影區域的透明度 shadowAlpha: 0.07, // Opacity of the shadow 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. }, // Plugin and renderer options. // BarRenderer. // With BarRenderer, you can specify additional options in the rendererOptions object // on the series or on the seriesDefaults object. Note, some options are respecified // (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits. // jqPlot各個不同插件的Option對象設置 // BarRenderer（設置柱狀圖的Option對象） // 該Option對象適用與柱狀圖的series和seriesDefault屬性的相關配置對象設置 seriesDefaults: { rendererOptions: { // 設置同一分類兩個柱狀條之間的距離（px） barPadding: 8, // number of pixels between adjacent bars in the same // group (same category or bin). // 設置不同分類的兩個柱狀條之間的距離（px）（同一個橫坐標表點上） barMargin: 10, // number of pixels between adjacent groups of bars. // 設置柱狀圖顯示的方向：垂直顯示和水平顯示，默認垂直顯示 barDirection: 'vertical', // vertical or horizontal. // 設置柱狀圖中每個柱狀條的寬度 barWidth: null, // width of the bars. null to calculate automatically. // 設置陰影區域偏移出圖片邊框的距離 shadowOffset: 2, // offset from the bar edge to stroke the shadow. // 設置影音區域重疊陰影的數量 shadowDepth: 5, // nuber of strokes to make for the shadow. // 設置陰影區域的透明度 shadowAlpha: 0.8, // transparency of the shadow. } }, // Cursor 光標 // Options are passed to the cursor plugin through the "cursor" object at the top // level of the options object. // 鼠標移動到圖中時，鼠標在圖中顯示形式，常與和高亮功能同時使用 // 此外，通過設置該屬性的zoom相關屬性來對圖中某個區域鑽取（就選定區域放大） // 該配置對象直接在option下配置 cursor: { // 當鼠標移動到圖片上時，鼠標的顯示樣式，該屬性值為css類 style: 'crosshair', // A CSS spec for the cursor type to change the // cursor to when over plot. //是否顯示光標 show: true, // 是否顯示提示信息欄 showTooltip: true, // show a tooltip showing cursor position. // 光標的提示信息欄是否隨光標（鼠標）一起移動 followMouse: false, // wether tooltip should follow the mouse or be stationary. // 光標提示信息欄的位置設置。如果followMouse=true,那么該位置為 // 提示信息欄相對於光標的位置。否則，為光標提示信息欄在圖標中的位置 // 該屬性可選值： n, ne, e, se, etc tooltipLocation: 'se', // location of the tooltip either relative to the mouse // (followMouse=true) or relative to the plot. One of // the compass directions, n, ne, e, se, etc. // 提示信息欄距鼠標(followMouse=true)或坐標軸（followMouse=false）的位置 tooltipOffset: 6, // pixel offset of the tooltip from the mouse or the axes. // 是否在信息提示欄中顯示光標位置（取其據圖標左和上邊緣線像素距離） showTooltipGridPosition: false, // show the grid pixel coordinates of the mouse // in the tooltip. // 是否顯示提示光標所在位置（取其在橫縱軸上數據值）的信息欄 // 注： 此處與showTooltipGridPosition值區別，前者顯示坐標值，該處顯示的是數據值 showTooltipUnitPosition: true, // show the coordinates in data units of the mouse // in the tooltip. // 用於設置提示信息框中數據顯示的格式前提條件是useAxesFormatters為false. // 此時信息提示框中數據格式不再與坐標軸一致，而是以此為准.同時，該屬性還支持html格式字符串 // 例:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f' tooltipFormatString: '%.4P', // sprintf style format string for tooltip values. // 提示信息框中數據顯示的格式是否和該數據在坐標軸上顯示格式一致 useAxesFormatters: true, // wether to use the same formatter and formatStrings // as used by the axes, or to use the formatString // specified on the cursor with sprintf. // 設定只有特殊的axes有tooltip提示 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 拖動 // Dragable options are specified with the "dragable" object at the top level // of the options object. dragable: { // 當拖動數據點時，拖動線與拖動數據點顏色 color: undefined, // custom color to use for the dragged point and dragged line // section. default will use a transparent variant of the line color. //設置拖動的的范圍: 'x'（只能在橫向上拖動）, 'y'（只能在縱向上拖動）, or 'none'（無限制） constrainTo: 'none', // Constrain dragging motion to an axis: 'x', 'y', or 'none'. }, // Highlighter 高亮 // Highlighter options are specified with the "highlighter" object at the top level // of the options object. highlighter: { // 當鼠標移動到放大的數據點上時，設置增大的數據點的寬度 // 目前僅適用於非實心數據點 lineWidthAdjust: 2.5, // pixels to add to the size line stroking the data point marker // when showing highlight. Only affects non filled data point markers. // 當鼠標移動到數據點上時，數據點擴大的增量增量 sizeAdjust: 5, // pixels to add to the size of filled markers when drawing highlight. // 是否顯示提示信息欄 showTooltip: true, // show a tooltip with data point values. // 提示信息顯示位置: n, ne, e, se, s, sw, w, nw tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw. // 設置提示信息欄出現和消失的方式（是否淡入淡出） fadeTooltip: true, // use fade effect to show/hide tooltip. // 設置提示信息欄淡入淡出的速度： slow, def, fast, 或者是一個毫秒數的值. tooltipFadeSpeed: "fast"// slow, def, fast, or a number of milliseconds. // 提示信息欄據被高亮顯示的數據點的偏移位置，以像素計 tooltipOffset: 2, // pixel offset of tooltip from the highlight. // 提示信息框顯示數據點那個坐標軸上的值，目前有橫/縱/橫縱三種方式，值分別為 x, y or both. tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both. // 提示信息欄不同值之間的間隔符號 tooltipSeparator: ', ' // separator between values in the tooltip. // 提示信息框中數據顯示的格式是否和該數據在坐標軸上顯示格式一致 useAxesFormatters: true // use the same format string and formatters as used in the axes to // display values in the tooltip. // 用於設置提示信息框中數據顯示的格式，前提條件是useAxesFormatters為false. // 此時信息提示框中數據格式不再與坐標軸一致，而是以此為准，同時，該屬性還支持html格式字符串 // 例:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f' tooltipFormatString: '%.5P' // sprintf format string for the tooltip. only used if // useAxesFormatters is false. Will use sprintf formatter with // this string, not the axes formatters. }, // LogAxisRenderer 指數渲染器 // LogAxisRenderer add 2 options to the axes object. These options are specified directly on // the axes or axesDefaults object. // 該渲染器只有兩個屬性，指數渲染器通過axesDefaults和axes配置對象進行配置 axesDefaults: { // 指數的底數 base: 10, // the logarithmic base. // 坐標軸顯示方式：'even' or 'power' // 'even' 產生的是均勻分布於坐標軸上的坐標刻度值 // 而'power' 則是根據不斷增大的增數來確定坐標軸上的刻度 tickDistribution: 'even', // 'even' or 'power'. 'even' will produce with even visiual (pixel) // spacing on the axis. 'power' will produce ticks spaced by // increasing powers of the log base. }, // PieRenderer 餅狀圖 // PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object. // 設置餅狀圖的OPtion對象 // 餅狀圖通過seriesDefaults和series配置對象進行配置 seriesDefaults: { rendererOptions: { // 設置餅的直徑 diameter: undefined, // diameter of pie, auto computed by default. // 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑 padding: 20, // padding between pie and neighboring legend or plot margin. // 餅的每個部分之間的距離 sliceMargin: 0, // gap between slices. // 設置餅的每部分被填充的狀態 fill: true, // render solid (filled) slices. // 為餅的每個部分的邊框設置陰影，以突出其立體效果 shadow:true, // 設置陰影區域偏移出餅的每部分邊框的距離 shadowOffset: 2, // offset of the shadow from the chart. // 設置陰影區域的深度 shadowDepth: 5, // Number of strokes to make when drawing shadow. Each stroke // offset by shadowOffset from the last. // 設置陰影區域的透明度 shadowAlpha: 0.07 // Opacity of the shadow } }, // Trendline 趨勢線 // Trendline takes options on the trendline object of the series or seriesDefaults object. seriesDefaults: { trendline: { // 是否顯示趨勢線 show: true, // show the trend line // 趨勢線顏色 color: '#666666', // CSS color spec for the trend line. // 趨勢線名稱 label: '', // label for the trend line. // 趨勢線類型'linear'（直線）, 'exponential'（冪值數線） or 'exp' type: 'linear', // 'linear', 'exponential' or 'exp' // 是否設置陰影 shadow: true, // show the trend line shadow. // 趨勢線寬度 lineWidth: 1.5, // width of the trend line. // 設置陰影區域的角度，從x軸順時針方向旋轉 shadowAngle: 45, // angle of the shadow. Clockwise from x axis. // 設置陰影區域偏移出餅的每部分邊框的距離 shadowOffset: 1.5, // offset from the line of the shadow. // 設置陰影區域的深度 shadowDepth: 3, // Number of strokes to make when drawing shadow. // Each stroke offset by shadowOffset from the last. // 設置陰影區域的透明度 shadowAlpha: 0.07 // Opacity of the shadow } } }
相關渲染器
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" />
該渲染器主要用於對現有數據進行線性回歸計算，並自動將計算結果以趨勢線的形式展示出來，當用戶拖動某個數據點時，趨勢線亦隨用戶拖動而變化。
Hooks鈎子
$.jqplot是jQuery的函數，當用戶創建一個plot圖表時，被調用。
jqPlot Pugin Hooks即下面這些鈎子，都是數組，可以往里面添加方法，在觸發相應的鈎子時，依次取出鈎子中的函數執行。
$.jqplot.eventListenerHooks有些例外，下面注釋會做解釋。
$.jqplot.preInitHooks // 在初始化之前執行 called before initialization. $.jqplot.postInitHooks // 在初始化之后執行called after initialization. $.jqplot.preParseOptionsHooks // 在解析options參數之前執行 called before user options are parsed. $.jqplot.postParseOptionsHooks // 在解析options參數之后執行 called after user options are parsed. $.jqplot.preDrawHooks // 在繪制圖表之前執行 called before plot draw. $.jqplot.postDrawHooks // 在繪制圖表之后執行 called after plot draw. $.jqplot.preDrawSeriesHooks // 在繪制每個坐標軸之前執行 called before each series is drawn. $.jqplot.postDrawSeriesHooks // 在繪制每個坐標軸之后執行 called after each series is drawn. $.jqplot.preDrawLegendHooks // 在繪制圖例之前執行，圖例就是指圖表中的標識 called before the legend is drawn. $.jqplot.addLegendRowHooks // 在繪制圖例之后執行，所以插件可以在圖例表里添加幾行 // called at the end of legend draw, so plugins can add rows to the legend table. $.jqplot.preSeriesInitHooks // 在數據線初始化之前執行 called before series is initialized. $.jqplot.postSeriesInitHooks // 在數據線初始化之后執行 called after series is initialized. $.jqplot.preParseSeriesOptionsHooks // 在解析數據線相關參數之前執行 called before series related options are parsed. $.jqplot.postParseSeriesOptionsHooks // 在解析數據線相關參數之后執行 called after series related options are parsed. $.jqplot.eventListenerHooks // 繪制結束后，將事件綁定到grid區域的頂部 例：$.jqplot.eventListenerHooks.push(['jqplotClick', function(){alert("event")}]); // called at the end of plot drawing, binds listeners to the event canvas which lays on top of the grid area. $.jqplot.preDrawSeriesShadowHooks // 當數據線有陰影時，在繪制數據線陰影之前執行 called before series shadows are drawn. $.jqplot.postDrawSeriesShadowHooks // 當數據線有陰影時，在繪制數據線陰影之后執行 called after series shadows are drawn.
使用鈎子的小例子
<!DOCTYPE html> <html> <head> <title>Line Charts</title> <meta charset="utf8"> <!-- 引入jqplot的CSS--> <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> <!-- 引入jquery--> <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="chart1" style="height:300px; width:500px;"></div> <script class="code" type="text/javascript"> $(document).ready(function() { $.jqplot.preInitHooks.push(function() { alert("初始化之前"); }); $.jqplot.postInitHooks.push(function() { alert("初始化結束"); }); $.jqplot.preParseOptionsHooks.push(function() { alert("解析options參數之前"); }); $.jqplot.postParseOptionsHooks.push(function() { alert("解析options參數結束"); }); $.jqplot.preDrawHooks.push(function() { alert("繪制圖表之前"); }); $.jqplot.postDrawHooks.push(function() { alert("繪制圖表結束"); }); $.jqplot.preDrawSeriesHooks.push(function() { alert("繪制每條數據線之前"); }); $.jqplot.postDrawSeriesHooks.push(function() { alert("繪制一個數據線結束"); }); $.jqplot.preSeriesInitHooks.push(function() { alert("數據線初始化之前"); }); $.jqplot.postSeriesInitHooks.push(function() { alert("數據線初始化結束"); }); $.jqplot.eventListenerHooks.push(['jqplotClick', function(){ alert("觸發點擊事件") }]); // 調用jqplot函數生成圖表 var plot1 = $.jqplot ('chart1', [[3,7,9,1,5,3,8,2,5]]); }); </script> <!-- 引入jqplot--> <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script> </body> </html>
今天就先寫到這里，明天繼續補充~~如有錯誤，請大家批評指正~~