jqPlot 图表中文API使用文档及源码和在线示例

答案：简介 

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=>
 

添加一个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.CanvasGridRend

上一个：ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
下一个：ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList