DIV CSS 佈局教程網

簡介

jqplot是一款非常不錯的基於jquery的圖表插件，這篇文章主要幫助大家整理了jqplot的中文使用說明和在線示例及源碼下載。jqplot插件在支持HTML5的浏覽器上將會在canvas上呈現圖表。

引入腳本文件

jqplot需要1.4.3以上的jquery版本支持，剛才說過了，jqplot在支持HTML5 Canvas的浏覽器上將以canvas呈現，否則，如果你在IE9以下版本的浏覽器上則要引入excanvas.js文件，當然，jqplot的CSS文件也要同時引入，代碼如下：

. 代碼如下:
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />


添加一個plot容器

我們可以在頁面上為jqplot添加一個容器，比如div，但要注意的是，要為這個div容器指定寬度好高度，如下代碼：

<div id="chartdiv" style="height:400px;width:300px; "></div>

開始創建plot圖表

接下來我們在上面創建好的容器中通過調用$.jqplot實現圖表的生成和渲染，比如如果用下面的數據來初始化jqplot圖表：

$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

最終顯示效果如下圖所示：

jqplot屬性選項
我們在調用$.jqplot時可以傳入一些參數options來自定義jqplot，部分參數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相同屬性設置
}
}
}

這裡給一個使用自定義參數的例子：
. 代碼如下:
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
});

顯示效果如下圖所示：

源碼下載 http://www.jb51.net/jiaoben/35457.html
其官方網站：http://www.jqplot.com/。