jquery jqPlot API 中文使用教程
jqPlot是一个灰常强大的图表工具,曲线,柱状,饼图,应该有尽有,更要命的是,调用方便~~
这里贡献上中文教程,基本上所有的api都很齐全,供有需要的童鞋们瞧瞧,更重要的是作为自己滴收藏~~哦耶耶~
jqPlot整的来说有三个地方需要配置。格式如:
$.jqplot(‘target’, data, options);target:要显示的位置。data:显示的数据。options:其它配置
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色,如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, // 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线), 那么每个分类(折线)在纵轴上的值为其前所有分类纵轴值总和与其纵,轴值相加值(eg, 当前分类纵轴值为Y3
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相同属性设置
}
}
}
jquery jqPlot API 中文使用教程的更多相关文章
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- 转载:TypeScript 简介与《TypeScript 中文入门教程》
简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...
- ActiveReports 报表控件官方中文入门教程 (3)-如何选择页面报表和区域报表
本篇文章将介绍区域报表和页面报表的常见使用场景.区别和选择报表类型的一些建议,两种报表的模板设计.数据源(设计时和运行时)设置.和浏览报表的区别. ActiveReports 报表控件官方中文入门教程 ...
- ActiveReports 报表控件官方中文入门教程 (1)-安装、激活以及产品资源
本系列文章主要是面向初次接触 ActiveReports 产品的用户,可以帮助您在三天之内轻松的掌握ActiveReports控件的基本使用方法,包括安装.激活.创建报表.绑定数据源以及发布等内容.本 ...
- Unity3D脚本中文系列教程(十三)
http://dong2008hong.blog.163.com/blog/static/469688272014032334486/ Unity3D脚本中文系列教程(十二) ◆ function G ...
- Unity3D脚本中文系列教程(六)
http://dong2008hong.blog.163.com/blog/static/469688272014031943118/ Unity3D脚本中文系列教程(五) 变量 ◆var colli ...
- freeRTOS中文实用教程5--内存管理
1.前言 不同的嵌入式系统具有不同的内存配置和时间要求.所以单一的内存分配算法只可能适合部分应用程序. FreeRTOS 将内存分配作为可移植层面(相对于基本的内核代码部分而言).这使得不同的应用程序 ...
- freeRTOS中文实用教程4--资源管理互斥
1.前言 访问一个被多任务共享,或是被任务与中断共享的资源时,需要采用”互斥”技术以保证数据在任何时候都保持一致性.这样做的目的是要确保任务从开始访问资源就具有排它性,直至这个资源又恢复到完整状态 F ...
- freeRTOS中文实用教程3--中断管理之中断嵌套
1.前言 最新的 FreeRTOS 移植中允许中断嵌套.中断嵌套需要在 FreeRTOSConfig.h 中设置configKERNEL_INTERRUPT_PRIORITY 和configMAX_S ...
随机推荐
- Linux 杂记
Linux命令行与图形界面进行切换 1.实时切换 1.1 命令行->图形 startx 1.2 图形->命令行 Ctrl+Alt+F1--F6 2.启动默认 2.1 启 ...
- Centos 6.5 安装 ionCube PHP Loader
使用某些php的程序的时候会出现提示:Site error: the file /***/index.php requires the ionCube PHP Loader ioncube_loade ...
- flex上下固定中间滚动布局
传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动 ...
- 处理GitHub不允许上传大于100M文件问题
第一步输入命令 cd /Users/Dora/Desktop/XXX(cd后面的这个路径要换成你自己项目的路径) 第二步输入命令 git rm --cached/Users/Dora/Desktop/ ...
- ScrollView can host only one direct child
Android 采用ScrollView布局时出现异常:ScrollView can host only one direct child. 异常原因: 主要是ScrollView内部只能有一个子元素 ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- IOS开发 - TextField 控件详细
//初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, ...
- 用wget下载整个目录
wget -c -r -np -P files www.test.com/dir/src -c 断点续传 -r 递归下载 -np 不下载父附录 -nd 不建立目录,若无此选项,将按照网站目录结构创建目 ...
- ruby环境的配置
安装 Ruby 解析器 一些Linux发行版本,MacOSX操作系统都自带Ruby解析器,但是我仍然建议自行下载ruby源代码编译安装.因为一方面可以自己定制ruby安装的路径,另一方面可以在编译过程 ...
- Ubuntu下freeradius-server的安装
一.安装 (1)更新 #apt-get update (2)下载 链接:ftp://ftp.freeradius.org/pub/freeradius/freeradius-server-2.2.9. ...