jqplot 属性及例子
一、Jqplot对象属性说明
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12","#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],// 默认显示的分类颜色，如果分类的数量超过这里的颜色数量，
则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, //如果置为true并且有多个分类（如果是折线图，就必须多于一条折线），
那么每个分类（折线）在纵轴上的值为其前所有分类纵轴值总和与其纵轴值相加值（eg,当前分类纵轴值为Y3 ，
其前有Y2,Y1，那么他显示在Y轴上值为Y2+Y3+Y1,目前该属性支持线图和柱状图
title: '', //设置当前图的标题，也可以把标题描述成一个对象，如下所示：
title: {
text: '', //设置当前图的标题
show: true, //是否显示标题
},
axesDefaults: { //横纵轴默认的属性设置
show: false, //是否自动渲染坐标轴，默认设置为自动渲染-false
min: null, //设置坐标轴的最小值，默认取传入参数数组中的最小值
max: null, //设置坐标轴的最小值，默认取传入参数数组中的最大值
pad: 1.2, //一个坐标轴数据区间的相乘因子，使得坐标轴区间增加而使得数据点
//不会落在坐标轴边缘上
tickInterval:null,//刻度间的间隔数
ticks: [],//设置横（纵）坐标的刻度上的值，可为该ticks数组中的值,g格式
两种，分别为[val1, val2, …..]、或者[[val1, label],[val2,label],[val3,label],…..]
numberTicks: undefined, //刻度的数目
renderer: $.jqplot.LinearAxisRenderer, //设置横（纵）轴上数据加载的渲
染器,有dateAxisRenderer
rendererOptions: {},// 设置renderer的Option配置对象，线状图不需要设置
tickOptions: {
mark: 'outside', // 设置坐标轴刻度显示方式，有outside、inside、cross，
分别表示外、内、穿过坐标轴
showMark: true, //是否显示刻度
showGridline: true,//是否在图表区域显示刻度值方向的网格线
markSize: 4,//每个刻度线顶点距刻度线在坐标轴上点距离（像素为单位）
如果mark值为 'cross', 那么每个刻度线都有上顶点和下顶点，刻度线与
坐标轴在刻度线中间交叉，那么这时这个距离×2
show: true,//是否显示刻度线，与刻度线同方向的网格线，以及坐标轴上的刻度值
showLabel: true,// 是否显示刻度线以及坐标轴上的刻度值
formatString: '',// 设置坐标轴上刻度值显示格式，eg:'%b %#d, %Y'表示格式"月 日，
年"，"AUG 30,2008"。 数字、字符串可格式化规范可参考：，
日期格式化规范可参考：http://www.jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html
},
showTicks: true,// 是否显示横轴刻度线以及的刻度值
showTickMarks: true,//设置是否显示刻度
useSeriesColor: true //如果有多个纵（横）坐标轴，通过该属性设置这些坐标轴是否其对应分类的颜色
},
axes: { //设置横纵轴的属性，默认取axesDefaults中的属性设置，在此处可以对指定的横纵轴进行单独的属性设置，
xaxis: {
//与axesDefaults中相同的属性设置
},
yaxis: {
//与axesDefaults中相同的属性设置
},
x2axis: {
//与axesDefaults中相同的属性设置
},
y2axis: {
//与axesDefaults中相同的属性设置
}
},
seriesDefaults:{ //如果有多个分类，这可通过该配置属性设置各个分类的共性属性
show: true,// 设置是否渲染整个图表区域（即显示图表中内容—趋势线、柱图）
xaxis: 'xaxis',//指定横轴 xaxis、x2axis、x3axis...
yaxis: 'yaxis',//指定纵轴yaxis、y2axis、y3axis...
label: '', / /用于显示在分类名称框中的分类名称
color: '', / / 分类在图标中表示（折现，柱状图等）的颜色
lineWidth: 2.5,/ / 分类图（特别是折线图）线条宽度
shadow: true, / / 各图在图表中是否显示阴影区域
shadowAngle: 45, //阴影角度, 以x轴的顺时针方向为参考
shadowOffset: 1.25, //设置阴影区域偏移出图片边框的距离
shadowDepth: 3, / / 设置阴影区域重叠阴影的数量
shadowAlpha: 0.1, //设置阴影区域的透明度
showLine: true, //是否显示图表中的折线（折线图中的折线）,false则只显示个数据点
showMarker: true, //是否强调显示图中的数据节点
fill: false, //是否填充折线下面的区域，如果设为true，则showLine也必须为true，否则无效果
fillAndStroke: false, //*在fill为true的状态下，在填充区域最上面显示一条线（如果是折线图则显示该折线）
fillColor: undefined, //*设置填充区域的颜色，默认为折线颜色
fillAlpha: undefined, //*设置填充区域的透明度
renderer: $.jqplot.LineRenderer,//利用渲染器渲染现有图表，从而转换成所需图表
rendererOptions: {},//传给上个属性所设置渲染器option对象，线状图的渲染器没有option对象，不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》 中各个图表的配置Option对象
markerRenderer: $.jqplot.MarkerRenderer,//利用渲染器渲染数据点
markerOptions: { //数据点选项设置
show: true, //是否显示数据点
style: 'filledCircle',//数据点的样式circle, diamond, square, filledCircle、filledDiamond or filledSquare
lineWidth: 2, //数据点各个的边的宽度（如果设置过大，各个边会重复，会显示的类似于实心点）
size: 9, //数据点的大小
color: '#666666',//数据点的颜色，默认使用线条的颜色
shadow: true, //是否显示数据点的阴影
shadowAngle: 45, //阴影角度, 以x轴的顺时针方向为参考
shadowOffset: 1, //设置阴影区域偏移出图片边框的距离
shadowDepth: 3, / / 设置阴影区域重叠阴影的数量
shadowAlpha: 0.07 //设置阴影透明度
}
isDragable: true,//是否允许拖动（如果dragable包已引入）,默认可拖动
},
series:[//如果有多个分类需要显示，这在此处设置各个分类的相关配置属性
//设置各个分类在分类名称框中的分类名称，分类名称顺序对应传入分类的参数顺序 //[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, //分类框距x轴的距离，单位：像素
yoffset: 12, //分类框距y轴的距离，单位：像素
},
grid: { //设置图表框的属性
drawGridLines: true, //是否描绘出图表框内的表格线
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, //用于描绘图表框的渲染器
rendererOptions: {} //渲染器Options对象设置，CanvasGridRenderer 没有Options对象
},
//BarRenderer（设置柱形图的Options对象）
// 使用 BarRenderer, 你可以在rendererOptions中指定另外的options操作
// 在series 或者seriesDefaults 对象中，一些选项是被重定义了的(例如 shadowDepth) ，用以重写BarRenderer
继承自lineRenderer的默认值
seriesDefaults: {
rendererOptions: {
barPadding: 8, //设置同一分类两个柱状条之间的距离（px）
barMargin: 10, //设置不同分类的两个柱状条之间的距离（px）（同一个横坐标表点上）
//设置柱状图显示的方向：垂直显示和水平显示(vertical、horizontal)，默认垂直显示
barDirection: 'vertical',
barWidth: null, //设置柱状条宽度，null表示自动计算获取
shadowOffset: 2, //设置阴影区域偏移出图片边框的距离
shadowDepth: 5, //设置阴影区域重叠阴影的数量
shadowAlpha: 0.8, //设置阴影透明度
}
},
//Cursor（光标）
//鼠标移动到图中时，鼠标在图中显示形式，常与和高亮功能同时使用
//此外，通过设置该属性的zoom相关属性来对图中某个区域钻取（就选定区域放大）
//该配置对象直接在option下配置
cursor: { //光标属性设置
style: 'crosshair', //当鼠标移动到图片上时，鼠标的显示样式，该属性值为css类
show: true, //是否显示光标
showTooltip: true, //是否显示提示信息栏
followMouse: false, //光标的提示信息栏是否随光标（鼠标）一起移动.
tooltipLocation: 'se', //标提示信息栏的位置设置。如果followMouse=true,那么该位置为，提示信息栏相对于
光标的位置。否则，为光标提示信息栏在图标中的位置，该属性可选值： n, ne, e, se等
tooltipOffset: 6, //提示信息栏距鼠标(followMouse=true)或坐标轴（followMouse=false）的位置
showTooltipGridPosition: false, //是否在信息提示栏中显示光标位置（取其据图标左和上边缘线像素距离）
showTooltipUnitPosition: true, //是否显示提示光标所在位置（取其在横纵轴上数据值）的信息栏。
//注：注意此处与showTooltipGridPosition值区别，前者显示坐标值，该处显示的是数据值
tooltipFormatString: '%.4P', //用于设置提示信息框中数据显示的格式，前提条件
是useAxesFormatters为false. 此时信息提示框中数据格式不再与坐标轴一致，而是以此为准。同时，
该属性还支持html格式字符串
'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f'
useAxesFormatters: true, //提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致
tooltipAxesGroups: [], //显示坐标轴组指定的提示信息，可以像如下方式指定提示信息：
[['xaxis', 'yaxis'], ['xaxis', 'y2axis']].默认显示所有分类的坐标轴组提示信息
},
// Dragable（拖动）
dragable: { //拖动设置
color: undefined, //当拖动数据点是，拖动线与拖动数据点颜色。默认会使用线条颜色的一种透明变体色
constrainTo: 'none',//设置拖动的的范围: 'x'（只能在横向上拖动）,'y'（只能在纵向上拖动）, 'none'（无限制）
},
// Highlighter（高亮）
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' //同光标（Cursor）
},
// LogAxisRenderer(指数渲染器)
//该渲染器只有两个属性， 指数渲染器通过axesDefaults和axes配置对象进行配置.
axesDefaults: {
base: 10, //指数的底数
tickDistribution: 'even', //坐标轴显示方式：'even' or 'power'. 'even' 产生的是均匀分布于坐标，
轴上的坐标刻度值 。而'power' 则是根据不断增大的增数来确定坐标轴上的刻度
},
// PieRenderer(设置饼状图的OPtion对象)
//饼状图通过seriesDefaults和series配置对象进行配置
seriesDefaults: {
rendererOptions: {
diameter: undefined, //设置饼的直径
padding: 20, //饼距离其分类名称框或者图表边框的距离，变相该表饼的直径
sliceMargin: 0, //饼的每个部分之间的距离
fill: true, //设置饼的每部分被填充的状态
shadowOffset: 2, //为饼的每个部分的边框设置阴影，以突出其立体效果.
shadowDepth: 5, //设置阴影区域的深度
shadowAlpha: 0.07 //设置阴影区域的透明度
}
},
// Trendline（趋势线）
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相同属性设置
}
}
二、实例
1、折线图例子
（1）依赖的js插件：
jquery.min.js、jquery.jqplot.min.js、/plugins/jqplot.cursor.min.js、/plugins/jqplot.dateAxisRenderer.min.js、plugins/jqplot.highlighter.min.js、jquery.jqplot.min.css，如果是IE9以下的IE浏览器，必须引用excanvas.js
（2）图例
（3）代码
$(document).ready(function(){
var cpu = [
["00:00:00",4], ["00:22:20",7], ["00:53:40",5],
["01:01:00",3],["01:32:20",5], ["03:53:40",9],
["04:02:00",6], ["04:43:20",9], ["04:32:40",8],
["04:53:00",5], ["05:53:20",7], ["06:23:40",9],
["02:44:00",4], ["00:04:20",5], ["00:04:40",3],
["07:05:00",13], ["07:45:20",17], ["07:25:40",19],
["08:06:00",14], ["08:56:20",21], ["08:26:40",15],
["09:07:00",22], ["09:37:20",28], ["09:37:40",31],
["10:08:00",37], ["10:38:20",85], ["10:58:40",36],
["11:09:00",50], ["11:49:20",38], ["11:59:40",27],
["12:10:00",53], ["12:30:20",49], ["13:10:40",60],
["14:11:00",43], ["15:11:20",65], ["16:11:40",44],
["17:12:00",35], ["18:12:20",50], ["19:12:40",65],
["20:13:00",70], ["21:43:20",59], ["21:13:40",79],
["22:14:00",43], ["22:54:20",36], ["23:02:40",45],
["23:45:00",23], ["23:15:20",15], ["18:35:40",48]];
var io = [ ["00:00:00",123], ["00:22:20",142], ["00:53:40",235],
["01:01:00",362],["01:32:20",452], ["03:53:40",145],
["04:02:00",458], ["04:43:20",489], ["04:32:40",249],
["04:53:00",746], ["05:53:20",371.28], ["06:23:40",365],
["02:44:00",315.07], ["00:04:20",380.36],["00:04:40",415.76],
["07:05:00",992.96], ["07:45:20",1350.02],["07:25:40",659.36],
["08:06:00",872.54], ["08:56:20",986.91], ["08:26:40",549.15],
["09:07:00",574.25], ["09:37:20",663.29], ["09:37:40",870.15],
["10:08:00",417.86], ["10:38:20",456.32], ["10:58:40",537],
["11:09:00",1346.43], ["11:49:20",2467], ["11:59:40",1544.62],
["12:10:00",673.2], ["12:30:20",744.06], ["13:10:40",357.45],
["14:11:00",1438.08], ["15:11:20",837.92], ["16:11:40",671.18],
["17:12:00",929.64], ["18:12:20",515.9], ["19:12:40",530.25],
["20:13:00",1457], ["21:43:20",996.69], ["21:13:40",714.87],
["22:14:00",876.7], ["22:54:20",1363.97], ["23:02:40",774.6],
["23:45:00",537.39], ["23:15:20",467.27], ["18:35:40",1328.75],
["19:56:00",615.25]];
var plot2 = $.jqplot('chartdiv', [cpu,io], {
title: '服务器参数',
seriesColors: [ "#4bb2c5", "#EAA228", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c5b47f", "#579575", "#839557", "#958c12"],
stackSeries: true,
series: [{
lineWidth: 1.5,
markerOptions: {
style: 'diamond',
lineWidth: 3,
size: 2, // 数据点的大小
shadowDepth: 3
}
},
{
yaxis:'y2axis',
lineWidth: 1.5,
markerOptions: {
show: true,
style: 'diamond',
lineWidth: 2,
size: 2,
shadowDepth: 3
}
}],
legend:{ //设置分类框的属性
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
labels:['CPU', 'IO'],//分类框内标签名称，顺序与传入参数顺序一致
rendererOptions:{
numberColumns:1
},
location: 'nw',
marginLeft: '0px'
},
axesDefaults: {
tickOptions:{
mark:'cross'
},
useSeriesColor: true
},
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
min:'00:00:00',
max:'23:59:59',
tickInterval: '3 hours', //刻度值的间隔数
tickOptions:{formatString:'%#H:%#M:%#S'}
},
yaxis:{
tickOptions:{formatString:'%.2f' //浮点型，取两位小数}
},
y2axis:{
autoscale: true, //该属性用于在没有明确指定最大、最小值时智能调整刻度区间
tickOptions:{ formatString:'%.2f',showGridline:false //不显示y2轴的表格线}
}
},
cursor:{
show: true, //是否显示提示信息
zoom: false, //是否启用变焦，鼠标左键选中图表去拖动可放大图标
looseZoom: true //扩展变焦范围，提供更全面的刻度值信息，目前仅对有时间轴和线性轴的图表有效
},
highlighter:{
show:true, //光标移至数据点时是否高亮突出显示
bringSeriesToFront:true,//光标移至数据点时是否把该分类的线形图置于分类的最顶层，该属性只是用于1.4版本以上的jquery
showTooltip: true //光标移至数据点时是否显示该点的数据提示信息
}
});
});
<body>
<div id="chartdiv" style="width: 500px; height: 400px;"></div>
</body>
2、柱形图例子
(1)依赖的js插件：
jquery.min.js、jquery.jqplot.min.js、plugins/jqplot.barRenderer.min.js、plugins/jqplot.categoryAxisRenderer.min.js、
plugins/jqplot.pointLabels.min.js、jquery.jqplot.min.css，如果是IE浏览器，且是IE9一下版本，则必须加excanvas.js
(2)图例：
(3)代码：
$(document).ready(function(){
var plot2 = $.jqplot('chart2',[[[2,1], [4,2], [6,3], [3,4]],[[5,1], [1,2], [3,3], [4,4]],[[4,1], [7,2], [1,3], [2,4]]],{
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { //数值点标签属性设置，该属性来自于jqplot.pointLabels.min.js
show: true, //是否在图表上显示数值点标签
location: 'e', //标签显示的方位
edgeTolerance: -15
},
shadowAngle: 135, //阴影角度
rendererOptions: { //设置柱形图的属性
barDirection: 'horizontal'//'vertical'
}
},
axes: {
yaxis: {
//把横(纵)坐标具有相同值的数据进行分类的渲染器
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
<body>
<div id="chart2" style="width: 500px; height: 400px;"></div>
</body>
3、饼图例子
(1)依赖的js插件：
jquery.jqplot.min.css、jquery.min.js、jquery.jqplot.min.js、
plugins/jqplot.pieRenderer.min.js、plugins/jqplot.donutRenderer.min.js
、如果是IE浏览器，且是IE9一下版本，则必须加excanvas.js
(2)图例：
(3)代码：
$(document).ready(function(){
var data = [['苹果', 20],['香蕉', 24],['雪梨', 16],['橘子', 28],['葡萄', 7],['荔枝', 5]];
var plot1 = jQuery.jqplot ('chart1', [data],{
title:'水果产量比例',
seriesDefaults: { //制作一个饼图
renderer: jQuery.jqplot.PieRenderer,//继承饼图渲染器
rendererOptions: {
//设置显示饼图饼块上的标签，默认是显示百分比
showDataLabels: true,
fill: true, //是否填充各饼块
sliceMargin: 4, //设置冰块间的间距
lineWidth: 5 //设置冰块的边框宽度
}
},
legend: { //分类框属性设置
show:true,
location: 'e'
}
});
});
<body>
<div id="chart1" style="width: 500px; height: 400px;"></div>
</body>