jqPlot jquery的页面图表绘制工具- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jqPlot jquery的页面图表绘制工具

Javascript: jQuery中isFunction方法的BUG修复; 将函数的实际参数转换成数组的方法; javascript 删除数组中重复项（uniq）; js 巧妙去除数组中的重复项; javascript下一种表单元素获取方法存在的问题; javascript 三种数组复制方法的性能对比; js 多层叠的TAB选项卡; javascript 自动标记来自搜索结果页的关键字; 起点页面传值js,有空研究学习下; javascript 的Document属性和方法集合; JavaScript 使用简略语法创建对象的代码; 使用JQuery进行跨域请求; jquery 经典动画菜单效果代码; jquery 常用操作方法; js提示信息jtip封装代码，可以是图片或文章; javascript面向对象的方式实现的弹出层效果代码; jquery中的sortable排序之后的保存状态的解决方法; js或css实现滚动广告的几种方案; 使用JavaScript库还是自己写代码？; js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « ‹ 281 282 283 284 › »

技术文章搜索

关键字

Javascript 中的 jqPlot jquery的页面图表绘制工具

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 221 ::

收藏到网摘: n/a

运用jquery实现table单双行不同显示并能单行选中 jquery tools之tabs 选项卡/页签

可能是个人认识能力有限，一直认为仅仅靠html是很难展现稍具动态的图表的，但是在看到jqPlot之后，我的认识有了很大改变，jqplpt——基于HTML的图表展示插件，而且不生成图片，最可贵的是能生成类似flex的数据动态提示以及动态改变数据展示范围等等。 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> 