JQuery图表插件Flot之效果源码

Love The Way You Lie 2022-08-23 00:40 170阅读 0赞

FLot是一个JQuery下图表插件，具有简单实用，交互效果，具有吸引力外观特点。

函数调用方法：

var plot=$.plot(placeholder,data,options)

图表相当于一幅画，如果自己要画一幅数据图都需要什么，应该怎么做呢？

一张画纸：即placeholder,绘图函数将把图画在placeholder内，这个占位符必须设置高宽，也就是确定画纸的大小。

横纵坐标数据：即data这个图表内都需要画那些东西。由data确定

样式：即options图表的颜色，事件，名称等等。

效果图：

![Center][]

Javascript代码：

var data1 = [[new Date(2016,6,2),95],[new Date(2016,7,2),100],[new Date(2016,8,2),110],
    		          [new Date(2016,9,2),95],[new Date(2016,10,2),105],[new Date(2016,12,2),160]];
    		var data2 = [[new Date(2016,6,2),110],[new Date(2016,7,2),125],[new Date(2016,8,2),160],
    		          [new Date(2016,9,2),130],[new Date(2016,10,2),135],[new Date(2016,12,2),140]];
    		$.plot("#placeholder", [                  
    			{ label: "低压", data: data1 },
    			{ label: "高压", data: data2 }
    		], {
    			series: {                      
    				lines: { show: true },      
    				points: { show: true }
    			},
    			xaxis: {                       
    				  mode: "time",             
    				  timeformat: "%Y-%m-%d"    
    			},
    			yaxis: {                        
    				ticks:10,                  
    				min: 80,                   
    				max: 200,                 
    				},
    			grid: {                       
    				backgroundColor: { colors: [ "#fff", "#eee" ] },
    				hoverable: true, 
    				clickable: true,
    				borderWidth: {
    					top: 0,
    					right: 0,
    					bottom: 1,
    					left: 0
    				}
    			}
    		});
    		$("<div id='tooltip'></div>").css({
    			position: "absolute",
    			display: "none",
    			border: "1px solid #fdd",
    			padding: "2px",
    			"background-color": "#fee",
    			opacity: 0.80
    		}).appendTo("body");
    
    		    $("#placeholder").bind("plothover", function (event, pos, item) {
    		            //$("#x").text(pos.x.toFixed(2));
    		            //$("#y").text(pos.y.toFixed(2));
    					//var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
    					//$("#hoverdata").text(str);
    					if (item) {
    						var x = item.datapoint[0].toFixed(2),
    							y = item.datapoint[1].toFixed(2);
    			   $("#tooltip").html(item.series.label + " : " + y)
    							.css({top: item.pageY+5, left: item.pageX+5})
    							.fadeIn(200);
    					} else {
    						$("#tooltip").hide();
    					}
    		    });
    
    		    $("#placeholder").bind("plotclick", function (event, pos, item) {
    		        if (item) {
    		            plot.highlight(item.series, item.datapoint);
    		        }
    		    });
    	});
    	</script>

HTML代码：

<body>
    	<div>
    		<h2>血压记录</h2>
    	</div>
    	<div id="content">
    		<div>
    			<div id="placeholder" style="width:700px;height:400px"></div>
    			   <p id="hoverdata">
    		</div>
    	</div>
    </body>

下篇文章将说明flot都有哪些常用的属性，方法。

[Center]: /images/20220722/3572d852cdf84506b1631537a96e013e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery Flot统计图表插件

[下载地址][Link 1] Flot动画师是一个jQuery插件,将添加平滑或渐进的动画Flot图表,Flot动画师将允许您强调和关注一些图表和/或系列动画通过轻松地添加到

「爱情、让人受尽委屈。」/ 2022年09月14日 13:27/ 0 赞/ 212 阅读

相关 mybatis源码解析之插件模块

> 原创不易，转载请注明出处文章目录前言 1.mybatis执行流程回顾 2.插件使用

客官°小女子只卖身不卖艺/ 2022年09月03日 14:21/ 0 赞/ 183 阅读

相关 JQuery图表插件Flot之属性方法

更多详情：http://www.cnblogs.com/jirimutu01/archive/2011/07/13/2105150.html 中文详解：http://www

小咪咪/ 2022年08月23日 00:41/ 0 赞/ 194 阅读

相关 JQuery图表插件Flot之效果源码

FLot是一个JQuery下图表插件，具有简单实用，交互效果，具有吸引力外观特点。函数调用方法： var plot=$.plot(placeholder,data

Love The Way You Lie/ 2022年08月23日 00:40/ 0 赞/ 171 阅读

相关 jQuery插件之Cookie

一、jQuery.Cookie.js插件是一个轻量级的Cookie管理插件。　　特别提醒，今日发现一个特别的错误，google浏览器提示：has no method $.c

青旅半醒/ 2022年08月06日 15:21/ 0 赞/ 229 阅读

相关 JQuery图表插件Flot之时间轴步长

由于图表在手机端展示，而客户要求时间轴的日期格式精确到秒也就是常见的 yyyy-MM-dd HH:mm:ss 格式。如果精确到秒则会出现这种情况。 ![Cente

拼搏现实的明天。/ 2022年07月16日 02:26/ 0 赞/ 299 阅读

相关 jquery之封装插件

今天就讲一下jquery封装插件的方法吧，看完这个，你就会认识到jquery里面好多功能的由来，以后也不用对jquery那么陌生了，会有一种亲近感了，嘻嘻。不过我们现在还

男娘i/ 2022年07月11日 11:09/ 0 赞/ 383 阅读

相关 Jquery插件之ajaxForm

如今ajax满天飞，作为重点的form自然也受到照顾。其实，我们在平常使用Jquery异步提交表单，一般是在submit()中，使用$.ajax进行。比如： ![复制代码

绝地灬酷狼/ 2022年06月12日 03:56/ 0 赞/ 257 阅读

相关 jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

原文链接:[http://www.jb51.net/article/77439.htm][http_www.jb51.net_article_77439.htm] 本文实例讲

末蓝、/ 2022年06月02日 06:43/ 0 赞/ 161 阅读

相关 flutter 图表插件之fl_chart

前言：之前很少接触图表功能，以为图表这种功能只能在H5上才能发挥得淋漓尽致，可谁曾料想，早有大神先把强大的chart图表功能给移植到flutter端上了，而且两端都可适用，

妖狐艹你老母/ 2021年09月02日 04:44/ 0 赞/ 644 阅读