Jquery之jqplot圖示外掛使用
阿新 • • 發佈：2018-11-10
jqplot下載地址：http://www.jqplot.com/download/
demo使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/jquery.jqplot.min.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jqplot.min.js"></script> <script type="text/javascript" src="js/jqplot.barRenderer.js"></script> <script type="text/javascript" src="js/jqplot.categoryAxisRenderer.js"></script> <script type="text/javascript" src="js/jquery.jqplot.min.js"></script> </head> <body> </body> <div id="chart1" style="height: 350px; width: 500px; position: relative;"> </div> <script type="text/javascript"> $(document).ready(function(){ var options = { seriesColors: ['black','red'], stackSeries:false, title:{ text:'資料圖', show:true } } var plot1 = $.jqplot ('chart1', [[1,2,3,4,5],[10,20,30]],options ); }); </script> </html>
下面是options的選項：
{ seriesColors: ["#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc" ], // 預設顯示的分類顏色，如果分類的數量超過這裡的顏色數量， 則從該佇列中第一個位置開始重新取值賦給相應的分類 stackSeries: false, // 如果置為true並且有多個分類（如果是折線圖，就必須多於一條折線）， 那麼每個分類（折線） 在縱軸上的值為其前所有分類縱軸值總和與其縱，軸值相加值 title: '', //設定當前圖的標題 title: { text: '', //設定當前圖的標題 show: true, //設定當前圖的標題是否顯示 }, axesDefaults: { show: false,//是否自動顯示座標軸。 min: null,//橫(縱) 軸最小刻度值 max: null,//橫(縱) 軸最大刻度值 pad: 1.2,//橫(縱) 軸度值增漲因子 ticks: [], //設定橫（縱）座標的刻度上的值，可為該ticks陣列中的值 numberTicks: undefined, //一個相除因子，用於設定橫（縱）座標刻度間隔，橫（縱）座標刻度間隔值=橫（縱）座標區間長度/(numberTicks-1) renderer: $.jqplot.LinearAxisRenderer, // 設定橫（縱）軸上資料載入的渲染器 rendererOptions: {}, // 設定renderer的Option配置物件，線狀圖不需要設定 tickOptions: { mark: 'outside', // 設定刻度在座標軸上的顯示方式：分為:座標軸外顯示，內顯示，和穿過顯示;其值分別為 'outside', 'inside' or '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: {// same options as axesDefaults }, yaxis: {// same options as axesDefaults }, x2axis: {// same options as axesDefaults }, y2axis: {// same options as axesDefaults } }, 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, // Opacity of the shadow. 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相同屬性設定 } } }