JQ 报表插件 jquery.jqplot 使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>显示报表</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- jquery --> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <!-- core --> <script type="text/javascript" src="jqplot/jquery.jqplot.js"></script> <link rel="stylesheet" href="jqplot/jquery.jqplot.css" type="text/css"></link> <!-- IE浏览器就需要引入excanvas.js--> <script language="javascript" type="text/javascript" src="jqplot/excanvas.js"></script> <!-- plugin --> <script type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.js"></script> <script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.js"></script> <script type="text/javascript" language="javascript"> $( function() { line1 = [ 4, 7, 9, 16 ]; //子统计1数据 line2 = [ 3, 7, 9, 3 ]; //子统计2数据 //--最简 plot = $.jqplot('chart', [ line1 ], { seriesDefaults : { renderer : $.jqplot.BarRenderer, //使用柱状图表示 rendererOptions : { barMargin : 35 //柱状体组之间间隔 } } }); //--双柱状图 plot1 = $.jqplot('chart1', [ line1, line2 ], { seriesDefaults : { renderer : $.jqplot.BarRenderer, //使用柱状图表示 rendererOptions : { barMargin : 35 //柱状体组之间间隔 } } }); //--添加横坐标分类 plot2 = $.jqplot('chart2', [ line1, line2 ], { seriesDefaults : { renderer : $.jqplot.BarRenderer, //使用柱状图表示 rendererOptions : { barMargin : 10 //柱状体组之间间隔 } }, axes : { xaxis : { ticks : [ '区域1', '区域2', '区域3', '区域4' ], renderer : $.jqplot.CategoryAxisRenderer //x轴绘制方式 } } }); }); </script> </head> <body> <div style="border:1px solid red; width:800px; height:800px; margin:0 auto;"> <span id="chart" style=" position:absolute;margin-top:20px; width:400px; height:240px;"></span></br> <span id="chart1" style="position:absolute;margin-top:260px; width:400px; height:240px;"></span></br> <span id="chart2" style="position:absolute;margin-top:520px; width:400px; height:240px;"></span> </div> </body> </html>
官网下载地址：https://bitbucket.org/cleonello/jqplot/downloads/
中文使用文档
--------------------------------
简介
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/。