JQuery图表插件Flot之效果源码

最新推荐文章于 2021-10-08 18:44:40 发布

qq_27194467

最新推荐文章于 2021-10-08 18:44:40 发布

阅读量1.8k

点赞数 1

分类专栏： Flot 文章标签： Flot

本文链接：https://blog.csdn.net/qq_27194467/article/details/51576215

版权

Flot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

函数调用方法：

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

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

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

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

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

效果图：

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都有哪些常用的属性，方法。

qq_27194467

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery图表插件Flot之效果源码

FLot是一个JQuery下图表插件，具有简单实用，交互效果，具有吸引力外观特点。函数调用方法：var plot = $.plot(placeholder, data, options) 稍后将对这三个参数加以详细说明先上效果图：
复制链接

扫一扫