推荐一个挺好用的jquery插件,jquery.jqplot.js(画图),此处简略得说一下折线图的画法

转载 2014年06月27日 20:56:35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset='utf-8'>
<head>
	<title>折线图</title>
	<!-- 引入css文件 -->
	<link rel='stylesheet' type='text/css' href='css/jquery.jqplot.css'>
	<!-- 引入juqery和jquplot插件,注意顺序,一定要先引入jquery -->
	<script  src='js/jquery.min.js'></script>
	<script  src='js/jquery.jqplot.js'></script>
</head>
<body>
	<div id='chart1' style='height:500px;width:600px;margin:0 auto;'></div>
	<script >	
		$(document).ready(function(){
			change();
			var t=setInterval(function(){
				change();
			},2000);
			// 隔两秒刷新一下数据
			function change(){
				$('#chart1').html(' ');
				// 定义一个随机数组
				var rand=[];
				// 定义数组长度
				var n=20;
				// 定义数据数组
				var record=[];
				for(var i=0;i<n;i++){
					// 生成0到100之间的随机数
					rand[i]=Math.random() * 100;
				};
				for(var i=0;i<n;i++){
					// 将随机数存入数组中,横坐标从零开始依次排列,纵坐标为rand中的随机数
					record[i]=new Array();
					record[i][0]=i;
					record[i][1]=rand[i];
				}
	  			$.jqplot('chart1',  [record],
				{ title:'一周温度折线图',
	  			series:[{color:'#5FAB78'}]
				});
				// title内为折线图标题,color为颜色,我此处用的是二进制的写法,可用photoshop查询相关颜色,然后修改为自己想要的颜色
			}
		});
	</script>
</body>s
</html>

因项目需要,需要写一个折线图。在网上找了下,发现了这个jqplot,发现挺好用的给大家推荐一下。用法挺简单,不多说,直接给代码了

相关文章推荐

使用jquery图表插件jqplot之折线图

首先一个简单的折线图: 直接上代码:   chart                             ...

使用jquery图表插件jqplot之折线图

首先一个简单的折线图: 直接上代码:   chart                             ...

echarts 项目使用总结

echarts项目使用总结在各种网站分享的echrts使用方式都是只给出写一个简单的demo,数据都是伪数据,而我将总结在真实的项目过程中使用echarts的开发过程以及遇到的问题。 定义基于html...

Jquery插件jqplot使用小记

      最近开发web ui使用的Jquery插件是Jqplot。      Jqplot资料的首选资源是www.jqplot.com。在example和doc里面有各种用的例子和资料。个人推荐从...

Jquery的画图插件-jqPlot+

JqPlot(个人和商业都免费) JqPlot 下载:https://skydrive.live.com/redir?resid=79CCF86148021B72!467...

手把手教你jQuery jqPlot画图插件

转自:http://developer.51cto.com/art/201104/258407.htm jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中...
  • wdt3385
  • wdt3385
  • 2012年12月03日 09:30
  • 425

JQUERY插件学习之jqPlot

JS图表,有HighCharts、JqPlot、JsChart,其中HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,在这用了JqPlot(个人和商业都免费),先学习下。 ...
  • bravezhe
  • bravezhe
  • 2012年06月15日 13:06
  • 19741

jQuery插件jqplot的详细配置说明和渲染器

jQuery.jqplot插件的官方网址:http://www.jqplot.com/jQuery.jqplot('target', data, options);//target:要显示的位置。da...

5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)

tapmodo / Jcrop  Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选。Github.com官网也使用了这个插件。有一个小细节是,边框线...

5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)

tapmodo / Jcrop  Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选。Github.com官网也使用了这个插件。有一个小细节是,边框线...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:推荐一个挺好用的jquery插件,jquery.jqplot.js(画图),此处简略得说一下折线图的画法
举报原因:
原因补充:

(最多只允许输入30个字)