推薦一個挺好用的jquery外掛，jquery.jqplot.js（畫圖）,此處簡略得說一下折線圖的畫法

風過留痕丶發表於2014-06-27
jQueryJS
<!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，發現挺好用的給大家推薦一下。用法挺簡單，不多說，直接給程式碼了

相關文章