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

jqplot折线图实现 例子

jqPlot 折线图 例子
  • SunMountain
  • SunMountain
  • 2015年01月15日 20:20
  • 3042

jQuery折线图

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

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

首先一个简单的折线图: 直接上代码:   chart                             ...
  • caihuajian235
  • caihuajian235
  • 2014年02月14日 17:56
  • 5519

jquery flot 实现实时折线图

  • 2016年11月24日 15:31
  • 102KB
  • 下载

jQuery 之 用折线图、饼图、柱状图、仪表盘 展现数据

ECharts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数...
  • u013630349
  • u013630349
  • 2016年07月14日 21:50
  • 1297

jqplot折线图实现 例子

jqPlot 折线图 例子
  • SunMountain
  • SunMountain
  • 2015年01月15日 20:20
  • 3042

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

首先一个简单的折线图: 直接上代码:   chart                             ...
  • caihuajian235
  • caihuajian235
  • 2014年02月14日 17:56
  • 5519

jQuery图表插件 jqPlot实现饼状图

饼状图demo $(document).ready(function(){
  • u010874036
  • u010874036
  • 2016年06月21日 09:21
  • 2356

利用canvas实现折线图的绘制

我们知道现在的很多H5的小游戏的开发都是基于canvas这个画布的,其实canvas之所以这么强大考的是他强大的API库的结果,知道一些canvas的基本API并且可以利用这些API是一个前端开发人员...
  • u013035477
  • u013035477
  • 2016年11月17日 19:42
  • 2178

echarts 插件开发柱状图、折线图、饼状图(具有详细的注释)

分析图表关闭 按分类统计次数 按时间统计次数 按时间统计运输量 /** *  以下是js代码 * / require.config({     paths: {         e...
  • wzm1994
  • wzm1994
  • 2017年06月20日 18:12
  • 784
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:推荐一个挺好用的jquery插件,jquery.jqplot.js(画图),此处简略得说一下折线图的画法
举报原因:
原因补充:

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