You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
	
	
		
			177 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			JavaScript
		
	
		
		
			
		
	
	
			177 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			JavaScript
		
	
| 
											11 years ago
										 | /* Flot plugin for showing crosshairs when the mouse hovers over the plot. | ||
|  | 
 | ||
|  | Copyright (c) 2007-2014 IOLA and Ole Laursen. | ||
|  | Licensed under the MIT license. | ||
|  | 
 | ||
|  | The plugin supports these options: | ||
|  | 
 | ||
|  | 	crosshair: { | ||
|  | 		mode: null or "x" or "y" or "xy" | ||
|  | 		color: color | ||
|  | 		lineWidth: number | ||
|  | 	} | ||
|  | 
 | ||
|  | Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical | ||
|  | crosshair that lets you trace the values on the x axis, "y" enables a | ||
|  | horizontal crosshair and "xy" enables them both. "color" is the color of the | ||
|  | crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of | ||
|  | the drawn lines (default is 1). | ||
|  | 
 | ||
|  | The plugin also adds four public methods: | ||
|  | 
 | ||
|  |   - setCrosshair( pos ) | ||
|  | 
 | ||
|  |     Set the position of the crosshair. Note that this is cleared if the user | ||
|  |     moves the mouse. "pos" is in coordinates of the plot and should be on the | ||
|  |     form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple | ||
|  |     axes), which is coincidentally the same format as what you get from a | ||
|  |     "plothover" event. If "pos" is null, the crosshair is cleared. | ||
|  | 
 | ||
|  |   - clearCrosshair() | ||
|  | 
 | ||
|  |     Clear the crosshair. | ||
|  | 
 | ||
|  |   - lockCrosshair(pos) | ||
|  | 
 | ||
|  |     Cause the crosshair to lock to the current location, no longer updating if | ||
|  |     the user moves the mouse. Optionally supply a position (passed on to | ||
|  |     setCrosshair()) to move it to. | ||
|  | 
 | ||
|  |     Example usage: | ||
|  | 
 | ||
|  | 	var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } }; | ||
|  | 	$("#graph").bind( "plothover", function ( evt, position, item ) { | ||
|  | 		if ( item ) { | ||
|  | 			// Lock the crosshair to the data point being hovered
 | ||
|  | 			myFlot.lockCrosshair({ | ||
|  | 				x: item.datapoint[ 0 ], | ||
|  | 				y: item.datapoint[ 1 ] | ||
|  | 			}); | ||
|  | 		} else { | ||
|  | 			// Return normal crosshair operation
 | ||
|  | 			myFlot.unlockCrosshair(); | ||
|  | 		} | ||
|  | 	}); | ||
|  | 
 | ||
|  |   - unlockCrosshair() | ||
|  | 
 | ||
|  |     Free the crosshair to move again after locking it. | ||
|  | */ | ||
|  | 
 | ||
|  | (function ($) { | ||
|  |     var options = { | ||
|  |         crosshair: { | ||
|  |             mode: null, // one of null, "x", "y" or "xy",
 | ||
|  |             color: "rgba(170, 0, 0, 0.80)", | ||
|  |             lineWidth: 1 | ||
|  |         } | ||
|  |     }; | ||
|  |      | ||
|  |     function init(plot) { | ||
|  |         // position of crosshair in pixels
 | ||
|  |         var crosshair = { x: -1, y: -1, locked: false }; | ||
|  | 
 | ||
|  |         plot.setCrosshair = function setCrosshair(pos) { | ||
|  |             if (!pos) | ||
|  |                 crosshair.x = -1; | ||
|  |             else { | ||
|  |                 var o = plot.p2c(pos); | ||
|  |                 crosshair.x = Math.max(0, Math.min(o.left, plot.width())); | ||
|  |                 crosshair.y = Math.max(0, Math.min(o.top, plot.height())); | ||
|  |             } | ||
|  |              | ||
|  |             plot.triggerRedrawOverlay(); | ||
|  |         }; | ||
|  |          | ||
|  |         plot.clearCrosshair = plot.setCrosshair; // passes null for pos
 | ||
|  |          | ||
|  |         plot.lockCrosshair = function lockCrosshair(pos) { | ||
|  |             if (pos) | ||
|  |                 plot.setCrosshair(pos); | ||
|  |             crosshair.locked = true; | ||
|  |         }; | ||
|  | 
 | ||
|  |         plot.unlockCrosshair = function unlockCrosshair() { | ||
|  |             crosshair.locked = false; | ||
|  |         }; | ||
|  | 
 | ||
|  |         function onMouseOut(e) { | ||
|  |             if (crosshair.locked) | ||
|  |                 return; | ||
|  | 
 | ||
|  |             if (crosshair.x != -1) { | ||
|  |                 crosshair.x = -1; | ||
|  |                 plot.triggerRedrawOverlay(); | ||
|  |             } | ||
|  |         } | ||
|  | 
 | ||
|  |         function onMouseMove(e) { | ||
|  |             if (crosshair.locked) | ||
|  |                 return; | ||
|  |                  | ||
|  |             if (plot.getSelection && plot.getSelection()) { | ||
|  |                 crosshair.x = -1; // hide the crosshair while selecting
 | ||
|  |                 return; | ||
|  |             } | ||
|  |                  | ||
|  |             var offset = plot.offset(); | ||
|  |             crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); | ||
|  |             crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); | ||
|  |             plot.triggerRedrawOverlay(); | ||
|  |         } | ||
|  |          | ||
|  |         plot.hooks.bindEvents.push(function (plot, eventHolder) { | ||
|  |             if (!plot.getOptions().crosshair.mode) | ||
|  |                 return; | ||
|  | 
 | ||
|  |             eventHolder.mouseout(onMouseOut); | ||
|  |             eventHolder.mousemove(onMouseMove); | ||
|  |         }); | ||
|  | 
 | ||
|  |         plot.hooks.drawOverlay.push(function (plot, ctx) { | ||
|  |             var c = plot.getOptions().crosshair; | ||
|  |             if (!c.mode) | ||
|  |                 return; | ||
|  | 
 | ||
|  |             var plotOffset = plot.getPlotOffset(); | ||
|  |              | ||
|  |             ctx.save(); | ||
|  |             ctx.translate(plotOffset.left, plotOffset.top); | ||
|  | 
 | ||
|  |             if (crosshair.x != -1) { | ||
|  |                 var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0; | ||
|  | 
 | ||
|  |                 ctx.strokeStyle = c.color; | ||
|  |                 ctx.lineWidth = c.lineWidth; | ||
|  |                 ctx.lineJoin = "round"; | ||
|  | 
 | ||
|  |                 ctx.beginPath(); | ||
|  |                 if (c.mode.indexOf("x") != -1) { | ||
|  |                     var drawX = Math.floor(crosshair.x) + adj; | ||
|  |                     ctx.moveTo(drawX, 0); | ||
|  |                     ctx.lineTo(drawX, plot.height()); | ||
|  |                 } | ||
|  |                 if (c.mode.indexOf("y") != -1) { | ||
|  |                     var drawY = Math.floor(crosshair.y) + adj; | ||
|  |                     ctx.moveTo(0, drawY); | ||
|  |                     ctx.lineTo(plot.width(), drawY); | ||
|  |                 } | ||
|  |                 ctx.stroke(); | ||
|  |             } | ||
|  |             ctx.restore(); | ||
|  |         }); | ||
|  | 
 | ||
|  |         plot.hooks.shutdown.push(function (plot, eventHolder) { | ||
|  |             eventHolder.unbind("mouseout", onMouseOut); | ||
|  |             eventHolder.unbind("mousemove", onMouseMove); | ||
|  |         }); | ||
|  |     } | ||
|  |      | ||
|  |     $.plot.plugins.push({ | ||
|  |         init: init, | ||
|  |         options: options, | ||
|  |         name: 'crosshair', | ||
|  |         version: '1.0' | ||
|  |     }); | ||
|  | })(jQuery); |