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 文件也要同时引入，代码如下：

添加一个plot容器

我们可以在页面上为jqplot添加一个容器，比如div，但要注意的是，要为这个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/。

JQ 报表插件 jquery.jqplot 使用的更多相关文章

jquery报表插件收藏 MARK
Highcharts http://www.hcharts.cn/ 统计报表插件 jquery ui官网 http://jqueryui.com/selectmenu/#custom_render
怎么用jq封装插件
怎么用jq封装插件以隔行变色为例实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再 ...
EChart报表插件使用笔记（1）
报表插件Echart java类 package com.spring.controller; import java.io.IOException; import java.util.Arrays; ...
轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...
动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
jQuery瀑布流插件——jQuery.Waterfall
插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...
jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
[插件]jQuery multiselect初始化及默认值修改
下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...
安装VS2010水晶报表插件
Visual Studio 2010默认不带水晶报表,需要安装一个水晶报表插件,首先下载此插件: http://downloads.businessobjects.com/akdlm/cr4vs201 ...

随机推荐

（转）dubbo design
框架设计整体设计图例说明: 图中左边淡蓝背景的为服务消费方使用的接口,右边淡绿色背景的为服务提供方使用的接口, 位于中轴线上的为双方都用到的接口. 图中从下至上分为十层,各层均为单向依赖,右边的黑 ...
[HTML5] Track First Contentful Paint with PerformanceObserver and Google Analytics
"If you can't measure it, you can't improve it." The first step when doing performance wor ...
iOS exit(),abort(),assert()函数区别
iOS exit(),abort(),assert()函数区别 exit() 退出程序 abort() 停止程序, assert()检查里面的参数如果为nil抛出异常:
python中好用的pip
1.windows/linux 下安装pip见上篇博客 http://www.cnblogs.com/Edwardzhao/p/5856924.html 2.好用的方法 pip install xxx ...
maven的profile 目录、变量打包
<project> <build> <finalName>maven-project</finalName> <resources> < ...
使用Monkeyrunner进行Android自动化的总结
http://www.2cto.com/kf/201411/356056.html 使用Monkeyrunner进行Android自动化的总结使用Android自动化的方式,不仅可以用来对Andro ...
iOS活动倒计时的两种实现方式
代码地址如下:http://www.demodashi.com/demo/11076.html 在做些活动界面或者限时验证码时, 经常会使用一些倒计时突出展现. 现提供两种方案: 一.使用NSTime ...
fastdfs安装
1:安装libevent rpm -aq |grep libevent|xargs rpm -e --nodeps tar zxvf libevent-2.0.21-stable.ta ...
zrrx笔试题（一）——文件复制&日期天数差
1. 利用输入输出流来复制文件步骤:1.构造文件字节输入输出流 2.创建一个字节数组,用来指定每次复制的字节大小 3.输入流从源文件读取字节,输出流将字节写入文件 import java.io ...
gsub
gsub("([ab])", "\\1_\\1_", "abc and ABC")[1] "a_a_b_b_c a_a_nd AB ...

JQ 报表插件 jquery.jqplot 使用

JQ 报表插件 jquery.jqplot 使用的更多相关文章

随机推荐

热门专题