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);
							 |