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获取文本框内选中文本的方法
Feb 20 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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 获取mysql数据库信息代码
2009/03/12 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
Django基础知识 URL路由系统详解
2019/07/18 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python实现微信机器人的方法
2019/09/06 Python
浅析Python 责任链设计模式
2020/09/11 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
如何保障Web服务器安全
2014/05/05 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
校长先进事迹材料
2014/02/01 职场文书
感谢信的格式
2015/01/21 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
2016年清明节寄语
2015/12/04 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
JS Canvas接口和动画效果大全
2021/04/29 Javascript