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学习(一)构建自己的JS库
Jan 02 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python3爬取数据至mysql的方法
2018/06/26 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
求职推荐信
2013/10/28 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
安全生产目标责任书
2014/04/14 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
新员工辞职信范文
2015/05/12 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL