JQuery图表插件Flot之效果源码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_27194467/article/details/51576215

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


展开阅读全文

没有更多推荐了,返回首页