jqPlot jquery的页面图表绘制工具


Posted in Javascript onJuly 25, 2009

jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件——也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件。
这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法:
第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pieRenderer)

<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> 
<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script>

第二步,增加一个图表展示区域的容器
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div>

第三步,获取数据
line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]];

第四步,配置Option对象,并创建图表
$.jqplot('chart', [line1], { 
title:'pieRenderer ',//设置饼状图的标题 
seriesDefaults: {fill: true, 
showMarker: false, 
shadow: false, 
renderer:$.jqplot.PieRenderer, 
rendererOptions:{ 
diameter: undefined, // 设置饼的直径 
padding: 20, // 饼距离其分类名称框或者图表边框的距离,变相该表饼的直径 
sliceMargin: 9, // 饼的每个部分之间的距离 
fill:true, // 设置饼的每部分被填充的状态 
shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果 
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 
shadowDepth: 5, // 设置阴影区域的深度 
shadowAlpha: 0.07 // 设置阴影区域的透明度 
} 
}, 
legend:{ 
show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置) 
location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. 
xoffset: 12, // 分类名称框距图表区域上边框的距离(单位px) 
yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px) 
} 
});

完整的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Simple Test</title> 
<!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" /> 
<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="./plugins/jqplot.pieRenderer.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
line1 = [['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]]; 
plot1 = $.jqplot('chart', [line1], { 
title:'pieRenderer ',//设置饼状图的标题 
seriesDefaults: {fill: true, 
showMarker: false, 
shadow: false, 
renderer:$.jqplot.PieRenderer, 
rendererOptions:{ 
diameter: undefined, // 设置饼的直径 
padding: 20, // 饼距离其分类名称框或者图表边框的距离,变相该表饼的直径 
sliceMargin: 9, // 饼的每个部分之间的距离 
fill:true, // 设置饼的每部分被填充的状态 
shadow:true, //为饼的每个部分的边框设置阴影,以突出其立体效果 
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离 
shadowDepth: 5, // 设置阴影区域的深度 
shadowAlpha: 0.07 // 设置阴影区域的透明度 
} 
}, 
legend:{ 
show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置) 
location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w. 
xoffset: 12, // 分类名称框距图表区域上边框的距离(单位px) 
yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px) 
} 
}); 
}); 
</script> 
</head> 
<body> 
<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div> 
</body> 
</html>

生成图表展示如下:

jqPlot jquery的页面图表绘制工具

下面是一些其他类型的图标的截图:

1.多纵轴图

jqPlot jquery的页面图表绘制工具

2.带提示信息的甘特图

jqPlot jquery的页面图表绘制工具

3.以table方式展示提示信息的甘特图

jqPlot jquery的页面图表绘制工具

4.带提示信息的线状图(可拖动)

jqPlot jquery的页面图表绘制工具

对于jqPlot功能的具体介绍请关注本文的后续文章——jqPlot的Option配置对象详解。
Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 #Javascript
从父页面读取和操作iframe中内容方法
Jul 25 #Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 #Javascript
JavaScript中null与undefined分析
Jul 25 #Javascript
js 字符串操作函数
Jul 25 #Javascript
javaScript Array(数组)相关方法简述
Jul 25 #Javascript
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 #Javascript
You might like
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
python列表操作实例
2015/01/14 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python自定义异常实例详解
2017/07/11 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
django+mysql的使用示例
2018/11/23 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
迟到检讨书800字
2014/01/13 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
升旗仪式主持词
2014/03/19 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
5s推行计划书
2014/05/06 职场文书
十八大演讲稿
2014/05/22 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Python中常见的导入方式总结
2021/05/06 Python
Python各协议下socket黏包问题原理
2022/04/12 Python