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

最新推荐文章于 2022-08-01 16:50:31 发布

风过留痕丶

最新推荐文章于 2022-08-01 16:50:31 发布

阅读量1.8k

点赞数

分类专栏： web前端文章标签： javascript html

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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，发现挺好用的给大家推荐一下。用法挺简单，不多说，直接给代码了