jqPlot jQuery繪圖插件的使用
jqPlot是一個jQuery繪圖插件,可以利用它制作漂亮的線狀圖和柱狀圖。jqPlot支持為圖表設置各種不同的樣式。提供Tooltips,數(shù)據(jù)點高亮顯示等功能。
官網(wǎng):http://www.jqplot.com/
這里貢獻上中文教程,基本上所有的api都很齊全,供有需要的童鞋們瞧瞧,更重要的是作為自己滴收藏~~哦耶耶~
jqPlot整的來說有三個地方需要配置。格式如:
$.jqplot(‘target', data, options);target:要顯示的位置。data:顯示的數(shù)據(jù)。options:其它配置
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默認顯示的分類顏色,如果分類的數(shù)量超過這里的顏色數(shù)量,則從該隊列中第一個位置開始重新取值賦給相應的分類
stackSeries: false, // 如果置為true并且有多個分類(如果是折線圖,就必須多于一條折線), 那么每個分類(折線)在縱軸上的值為其前所有分類縱軸值總和與其縱,軸值相加值(eg, 當前分類縱軸值為Y3
title: '', //設置當前圖的標題
title: { text: '', //設置當前圖的標題 show: true,//設置當前圖的標題是否顯示 }, axesDefaults: { show: false, 是否自動顯示坐標軸。 min: null, 橫(縱)軸最小刻度值 max: null, 橫(縱)軸最大刻度值 pad: 1.2, 橫(縱)軸度值增漲因子 ticks: [], //設置橫(縱)坐標的刻度上的值,可為該ticks數(shù)組中的值 numberTicks: undefined,//一個相除因子,用于設置橫(縱)坐標刻度間隔,橫(縱)坐標刻度間隔值=橫(縱)坐標區(qū)間長度/(numberTicks-1) renderer: $.jqplot.LinearAxisRenderer, // 設置橫(縱)軸上數(shù)據(jù)加載的渲染器 rendererOptions: {}, // 設置renderer的Option配置對象,線狀圖不需要設置 tickOptions: { mark: 'outside', // 設置刻度在坐標軸上的顯示方式:分為:坐標軸外顯示,內顯示,和穿過顯示;其值分別為 'outside', 'inside' or 'cross'。 showMark: true, //設置是否顯示刻度 showGridline: true, // 是否在圖表區(qū)域顯示刻度值方向的網(wǎng)格 markSize: 4, // 每個刻度線頂點距刻度線在坐標軸上點距離(像素為單位)如果mark值為 'cross', 那么每個刻度線都有上頂點和下頂點,刻度線與坐標軸 在刻度線中間交叉,那么這時這個距離×2 show: true, //是否顯示刻度線,與刻度線同方向的網(wǎng)格線,以及坐標軸上的刻度值 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: { // same options as axesDefaults }, yaxis: { // same options as axesDefaults }, x2axis: { // same options as axesDefaults }, y2axis: { // same options as axesDefaults } }, seriesDefaults: {//如果有多個分類,這可通過該配置屬性設置各個分類的共性屬性 show: true, //設置是否渲染整個圖表區(qū)域(即顯示圖表中內容). xaxis: 'xaxis', // either 'xaxis' or 'x2axis'. yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. label: '', // 用于顯示在分類名稱框中的分類名稱. color: '', // 分類在圖標中表示(折現(xiàn),柱狀圖等)的顏色. lineWidth: 2.5, // 分類圖(特別是折線圖)哪寬度. shadow: true, // 各圖在圖表中是否顯示陰影區(qū)域. shadowAngle: 45, //參考grid中相同參數(shù). shadowOffset: 1.25, //參考grid中相同參數(shù). shadowDepth: 3, //參考grid中相同參數(shù). shadowAlpha: 0.1, // Opacity of the shadow. showLine: true, //是否顯示圖表中的折線(折線圖中的折線) showMarker: true, // 是否強調顯示圖中的數(shù)據(jù)節(jié)點 fill: false, // 是否填充圖表中折線下面的區(qū)域(填充顏色同折線顏色)以及l(fā)egend //設置的分類名稱框中分類的顏色,此處注意的是如果fill為true, //那么showLine必須為true,否則不會顯示效果 fillAndStroke: false, //在fill為true的狀態(tài)下,在填充區(qū)域最上面顯示一條線(如果是折線圖則顯示該折線) fillColor: undefined, // 設置填充區(qū)域的顏色 fillAlpha: undefined, // 梃置填充區(qū)域的透明度 renderer: $.jqplot.PieRenderer, // 利用渲染器(這里是利用餅圖PieRenderer)渲染現(xiàn)有圖表 //,從而轉換成所需圖表 rendererOptions: {}, // 傳給上個屬性所設置渲染器的option對象,線狀圖的渲染器沒有option對象, //不同圖表的Option配置對象請參見下面《jqPlot各個不同插件的Option對象設置》 //中各個圖表的配置Option對象 markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data // point markers. markerOptions: { show: true, // 是否在圖中顯示數(shù)據(jù)點 style: 'filledCircle', // 各個數(shù)據(jù)點在圖中顯示的方式,默認是"filledCircle"(實心圓點), //其他幾種方式circle,diamond, square, filledCircle, // filledDiamond or filledSquare. lineWidth: 2, // 數(shù)據(jù)點各個的邊的寬度(如果設置過大,各個邊會重復,會顯示的類似于實心點) size: 9, // 數(shù)據(jù)點的大小 color: '#666666' // 數(shù)據(jù)點的顏色 shadow: true, // 是否為數(shù)據(jù)點顯示陰影區(qū)(增加立體效果) shadowAngle: 45, // 陰影區(qū)角度,x軸順時針方向 shadowOffset: 1, // 參考grid中相同參數(shù) shadowDepth: 3, //參考grid中相同參數(shù) shadowAlpha: 0.07 // 參考grid中相同參數(shù) } isDragable: true,//是否允許拖動(如果dragable包已引入),默認可拖動 }, series:[ //如果有多個分類需要顯示,這在此處設置各個分類的相關配置屬性 //eg.設置各個分類在分類名稱框中的分類名稱 //[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]//配置參數(shù)設置同seriesDefaults ], legend: { show: false,//設置是否出現(xiàn)分類名稱框(即所有分類的名稱出現(xiàn)在圖的某個位置) location: 'ne', // 分類名稱框出現(xiàn)位置, nw, n, ne, e, se, s, sw, w. xoffset: 12, // 分類名稱框距圖表區(qū)域上邊框的距離(單位px) yoffset: 12, // 分類名稱框距圖表區(qū)域左邊框的距離(單位px) background:'' //分類名稱框距圖表區(qū)域背景色 textColor:'' //分類名稱框距圖表區(qū)域內字體顏色 }, grid: { drawGridLines: true, // wether to draw lines across the grid or not. gridLineColor: '#cccccc' // 設置整個圖標區(qū)域網(wǎng)格背景線的顏色 background: '#fffdf6', // 設置整個圖表區(qū)域的背景色 borderColor: '#999999', // 設置圖表的(最外側)邊框的顏色 borderWidth: 2.0, //設置圖表的(最外側)邊框寬度 shadow: true, // 為整個圖標(最外側)邊框設置陰影,以突出其立體效果 shadowAngle: 45, // 設置陰影區(qū)域的角度,從x軸順時針方向旋轉 shadowOffset: 1.5, // 設置陰影區(qū)域偏移出圖片邊框的距離 shadowWidth: 3, // 設置陰影區(qū)域的寬度 shadowDepth: 3, // 設置影音區(qū)域重疊陰影的數(shù)量 shadowAlpha: 0.07 // 設置陰影區(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各個不同插件的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相關屬性來對圖中某個區(qū)域鉆?。ň瓦x定區(qū)域放大) //該配置對象直接在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,//是否在信息提示欄中顯示光標位置(取其據(jù)圖標左和上邊緣線像素距離) showTooltipUnitPosition: true,// 是否顯示提示光標所在位置(取其在橫縱軸上數(shù)據(jù)值)的信息欄 //注:注意此處與showTooltipGridPosition值區(qū)別,前者顯示坐標值,該處顯示的是數(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(拖動) //該配置對象通過seriesDefaults和series配置對象進行配置 seriesDefaults: { dragable: { color: undefined, // 當拖動數(shù)據(jù)點是,拖動線與拖動數(shù)據(jù)點顏色 constrainTo: 'none', //設置拖動的的范圍: 'x'(只能在橫向上拖動), // 'y'(只能在縱向上拖動), or 'none'(無限制). }, }, // Highlighter(高亮) //設置高亮動作option屬性對象 //鼠標移動到某個數(shù)據(jù)點上時,該數(shù)據(jù)點增大并顯示提示信息框 //該配置對象直接在option下配置 highlighter: { lineWidthAdjust: 2.5, //當鼠標移動到放大的數(shù)據(jù)點上時,設置增大的數(shù)據(jù)點的寬度 // 目前僅適用于非實心數(shù)據(jù)點 sizeAdjust: 5, // 當鼠標移動到數(shù)據(jù)點上時,數(shù)據(jù)點擴大的增量增量 showTooltip: true, // 是否顯示提示信息欄 tooltipLocation: 'nw', // 提示信息顯示位置(英文方向的首寫字母): n, ne, e, se, s, sw, w, nw. fadeTooltip: true, // 設置提示信息欄出現(xiàn)和消失的方式(是否淡入淡出) tooltipFadeSpeed: "fast"http://設置提示信息欄淡入淡出的速度: slow, def, fast, 或者是一個毫秒數(shù)的值. tooltipOffset: 2, // 提示信息欄據(jù)被高亮顯示的數(shù)據(jù)點的偏移位置,以像素計。 tooltipAxes: 'both', // 提示信息框顯示數(shù)據(jù)點那個坐標軸上的值,目前有橫/縱/橫縱三種方式。 //值分別為 x, y or xy. tooltipSeparator: ', ' // 提示信息欄不同值之間的間隔符號 useAxesFormatters: true // 提示信息框中數(shù)據(jù)顯示的格式是否和該數(shù)據(jù)在坐標軸上顯示格式一致 tooltipFormatString: '%.5P' // 用于設置提示信息框中數(shù)據(jù)顯示的格式,前提條件是useAxesFormatters // 為false. 此時信息提示框中數(shù)據(jù)格式不再與坐標軸一致,而是以此為準 //同時,該屬性還支持html格式字符串 //eg:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f' }, // LogAxisRenderer(指數(shù)渲染器) // 該渲染器只有兩個屬性, 指數(shù)渲染器通過axesDefaults和axes配置對象進行配置 axesDefaults: { base: 10, // 指數(shù)的底數(shù) tickDistribution: 'even', // 坐標軸顯示方式:'even' or 'power'. 'even' 產(chǎn)生的是均勻分布于坐標 //軸上的坐標刻度值 。而'power' 則是根據(jù)不斷增大的增數(shù)來確定坐標軸上的刻度 }, // PieRenderer(設置餅狀圖的OPtion對象) // 餅狀圖通過seriesDefaults和series配置對象進行配置 seriesDefaults: { rendererOptions: { diameter: undefined, // 設置餅的直徑 padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離,變相該表餅的直徑 sliceMargin: 20, // 餅的每個部分之間的距離 fill:true, // 設置餅的每部分被填充的狀態(tài) shadow:true, //為餅的每個部分的邊框設置陰影,以突出其立體效果 shadowOffset: 2, //設置陰影區(qū)域偏移出餅的每部分邊框的距離 shadowDepth: 5, // 設置陰影區(qū)域的深度 shadowAlpha: 0.07 // 設置陰影區(qū)域的透明度 } }, //pointLabels(數(shù)據(jù)點標簽) //用于在數(shù)據(jù)點所在位置顯示相關信息(非提示框性質) seriesDefaults: { pointLabels: { location:'s',//數(shù)據(jù)標簽顯示在數(shù)據(jù)點附近的方位 ypadding:2 //數(shù)據(jù)標簽距數(shù)據(jù)點在縱軸方向上的距離 } } // Trendline(趨勢線) // 餅狀圖通過seriesDefaults和series配置對象進行配置 seriesDefaults: { trendline: { show: true, // 是否顯示趨勢線 color: '#666666', // 趨勢線顏色 label: '', // 趨勢線名稱 type: 'linear', //趨勢線類型'linear'(直線), 'exponential'(冪值數(shù)線) or 'exp' shadow: true, // 同grid相同屬性設置 lineWidth: 1.5, // 趨勢線寬度 shadowAngle: 45, // 同grid相同屬性設置 shadowOffset: 1.5, // 同grid相同屬性設置 shadowDepth: 3, // 同grid相同屬性設置 shadowAlpha: 0.07 // 同grid相同屬性設置 } } }
以上就是本文的全部內容,希望能幫到大家,也希望大家多多支持腳本之家。
- jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
- jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
- 快速解決FusionCharts聯(lián)動的中文亂碼問題
- JSP FusionCharts Free顯示圖表 具體實現(xiàn)
- FusionCharts圖表顯示雙Y軸雙(多)曲線
- jQuery基于ajax實現(xiàn)帶動畫效果無刷新柱狀圖投票代碼
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- jQuery制作簡單柱狀圖實例
- 使用jQuery jqPlot插件繪制柱狀圖
- JQUBAR1.1 jQuery 柱狀圖插件發(fā)布
- JQUBar 基于JQUERY的柱狀圖插件
- jQuery插件ImageDrawer.js實現(xiàn)動態(tài)繪制圖片動畫(附源碼下載)
- jQuery插件FusionCharts實現(xiàn)的3D柱狀圖效果實例【附demo源碼下載】
相關文章
jQuery學習筆記之jQuery.fn.init()的參數(shù)分析
這篇文章主要介紹了jQuery.fn.init()的參數(shù)分析,需要的朋友可以參考下2014-06-06jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用介紹
本篇文章介紹了,jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用。需要的朋友參考下2013-04-04js中獲取 table節(jié)點各tr及td的內容簡單實例
下面小編就為大家?guī)硪黄猨s中獲取 table節(jié)點各tr及td的內容簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jqGrid表格應用之新增與刪除數(shù)據(jù)附源碼下載
jqGrid可以結合fancybox等插件完成超酷的彈出層效果,通過與php后臺交互,可以輕松完成數(shù)據(jù)的添加與詳情查看,而這個過程完全是一個ajax異步通信過程,是一個非常友好的富客戶端應用,本文給大家介紹jqGrid表格應用之新增與刪除數(shù)據(jù),需要的朋友參考下2015-12-12jQuery中each()、find()和filter()等節(jié)點操作方法詳解(推薦)
這篇文章主要介紹了jQuery中each()、find()和filter()等節(jié)點操作方法的相關資料,非常不錯具有參考價值,需要的朋友可以參考下2016-05-05