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

Excel图表实战视频课程【你学得会】

-
  • 1970年01月01日 08:00

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

首先一个简单的折线图: 直接上代码:   chart                             ...
  • caihuajian235
  • caihuajian235
  • 2014-02-14 17:56:59
  • 5908

jQuery制作华丽图表折线图等

  • 2013年12月27日 11:41
  • 60KB
  • 下载

jquery折线图组件终极版

html文件: 折线图 javascript文件:/*--------------------------传入参数示例--------------------------...
  • zyq19931019
  • zyq19931019
  • 2016-03-30 09:14:51
  • 373

jQuery折线图

js引用: 定时刷新: //曲线图 var chart; $(document).ready(...
  • u010678947
  • u010678947
  • 2014-03-12 13:58:26
  • 899

jqplot折线图实现 例子

jqPlot 折线图 例子
  • SunMountain
  • SunMountain
  • 2015-01-15 20:20:53
  • 3237

使用Jqplot实现Ajax动态图表示例

调试了一天,终于把jqplot弄明白了,里面的一些样式属性等,制作出来的图表确实很漂亮,也很实用。 先看一下最终效果: 代码如下,以后有时间再把详细参数和配置方法写出来。 ...
  • softwave
  • softwave
  • 2011-11-12 23:00:40
  • 17350

JS Chart jqplot RGraph 对比

操作系统: android 2.3 程序框架: phonegap + jquery mobile 三种图表插件: JS Chart 、 RGraph 、jqplot ...
  • zhang1314wen2008
  • zhang1314wen2008
  • 2013-03-14 11:24:43
  • 1824

JQUERY插件学习之jqPlot

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

jquery flot 实现实时折线图

  • 2016年11月24日 15:31
  • 102KB
  • 下载
收藏助手
不良信息举报
您举报文章:推荐一个挺好用的jquery插件,jquery.jqplot.js(画图),此处简略得说一下折线图的画法
举报原因:
原因补充:

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