| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /* Flot plugin for adding the ability to pan and zoom the plot. |
| A | 2 | |
| 3 | Copyright (c) 2007-2013 IOLA and Ole Laursen. | |
| 4 | Licensed under the MIT license. | |
| 5 | ||
| 6 | The default behaviour is double click and scrollwheel up/down to zoom in, drag | |
| 7 | to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and | |
| 8 | plot.pan( offset ) so you easily can add custom controls. It also fires | |
| 9 | "plotpan" and "plotzoom" events, useful for synchronizing plots. | |
| 10 | ||
| 11 | The plugin supports these options: | |
| 12 | ||
| 13 | zoom: { | |
| 14 | interactive: false | |
| 15 | trigger: "dblclick" // or "click" for single click | |
| 16 | amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) | |
| 17 | } | |
| 18 | ||
| 19 | pan: { | |
| 20 | interactive: false | |
| 21 | cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer" | |
| 22 | frameRate: 20 | |
| 23 | } | |
| 24 | ||
| 25 | xaxis, yaxis, x2axis, y2axis: { | |
| 26 | zoomRange: null // or [ number, number ] (min range, max range) or false | |
| 27 | panRange: null // or [ number, number ] (min, max) or false | |
| 28 | } | |
| 29 | ||
| 30 | "interactive" enables the built-in drag/click behaviour. If you enable | |
| 31 | interactive for pan, then you'll have a basic plot that supports moving | |
| 32 | around; the same for zoom. | |
| 33 | ||
| 34 | "amount" specifies the default amount to zoom in (so 1.5 = 150%) relative to | |
| 35 | the current viewport. | |
| 36 | ||
| 37 | "cursor" is a standard CSS mouse cursor string used for visual feedback to the | |
| 38 | user when dragging. | |
| 39 | ||
| 40 | "frameRate" specifies the maximum number of times per second the plot will | |
| 41 | update itself while the user is panning around on it (set to null to disable | |
| 42 | intermediate pans, the plot will then not update until the mouse button is | |
| 43 | released). | |
| 44 | ||
| 45 | "zoomRange" is the interval in which zooming can happen, e.g. with zoomRange: | |
| 46 | [1, 100] the zoom will never scale the axis so that the difference between min | |
| 47 | and max is smaller than 1 or larger than 100. You can set either end to null | |
| 48 | to ignore, e.g. [1, null]. If you set zoomRange to false, zooming on that axis | |
| 49 | will be disabled. | |
| 50 | ||
| 51 | "panRange" confines the panning to stay within a range, e.g. with panRange: | |
| 52 | [-10, 20] panning stops at -10 in one end and at 20 in the other. Either can | |
| 53 | be null, e.g. [-10, null]. If you set panRange to false, panning on that axis | |
| 54 | will be disabled. | |
| 55 | ||
| 56 | Example API usage: | |
| 57 | ||
| 58 | plot = $.plot(...); | |
| 59 | ||
| 60 | // zoom default amount in on the pixel ( 10, 20 ) | |
| 61 | plot.zoom({ center: { left: 10, top: 20 } }); | |
| 62 | ||
| 63 | // zoom out again | |
| 64 | plot.zoomOut({ center: { left: 10, top: 20 } }); | |
| 65 | ||
| 66 | // zoom 200% in on the pixel (10, 20) | |
| 67 | plot.zoom({ amount: 2, center: { left: 10, top: 20 } }); | |
| 68 | ||
| 69 | // pan 100 pixels to the left and 20 down | |
| 70 | plot.pan({ left: -100, top: 20 }) | |
| 71 | ||
| 72 | Here, "center" specifies where the center of the zooming should happen. Note | |
| 73 | that this is defined in pixel space, not the space of the data points (you can | |
| 74 | use the p2c helpers on the axes in Flot to help you convert between these). | |
| 75 | ||
| 76 | "amount" is the amount to zoom the viewport relative to the current range, so | |
| 77 | 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You | |
| 78 | can set the default in the options. | |
| 79 | ||
| 80 | */ | |
| 81 | ||
| 82 | // First two dependencies, jquery.event.drag.js and | |
| 83 | // jquery.mousewheel.js, we put them inline here to save people the | |
| 84 | // effort of downloading them. | |
| 85 | ||
| 86 | /* | |
| 87 | jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com) | |
| 88 | Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt | |
| 89 | */ | |
| 90 | (function(a){function e(h){var k,j=this,l=h.data||{};if(l.elem)j=h.dragTarget=l.elem,h.dragProxy=d.proxy||j,h.cursorOffsetX=l.pageX-l.left,h.cursorOffsetY=l.pageY-l.top,h.offsetX=h.pageX-h.cursorOffsetX,h.offsetY=h.pageY-h.cursorOffsetY;else if(d.dragging||l.which>0&&h.which!=l.which||a(h.target).is(l.not))return;switch(h.type){case"mousedown":return a.extend(l,a(j).offset(),{elem:j,target:h.target,pageX:h.pageX,pageY:h.pageY}),b.add(document,"mousemove mouseup",e,l),i(j,!1),d.dragging=null,!1;case!d.dragging&&"mousemove":if(g(h.pageX-l.pageX)+g(h.pageY-l.pageY)<l.distance)break;h.target=l.target,k=f(h,"dragstart",j),k!==!1&&(d.dragging=j,d.proxy=h.dragProxy=a(k||j)[0]);case"mousemove":if(d.dragging){if(k=f(h,"drag",j),c.drop&&(c.drop.allowed=k!==!1,c.drop.handler(h)),k!==!1)break;h.type="mouseup"}case"mouseup":b.remove(document,"mousemove mouseup",e),d.dragging&&(c.drop&&c.drop.handler(h),f(h,"dragend",j)),i(j,!0),d.dragging=d.proxy=l.elem=!1}return!0}function f(b,c,d){b.type=c;var e=a.event.dispatch.call(d,b);return e===!1?!1:e||b.result}function g(a){return Math.pow(a,2)}function h(){return d.dragging===!1}function i(a,b){a&&(a.unselectable=b?"off":"on",a.onselectstart=function(){return b},a.style&&(a.style.MozUserSelect=b?"":"none"))}a.fn.drag=function(a,b,c){return b&&this.bind("dragstart",a),c&&this.bind("dragend",c),a?this.bind("drag",b?b:a):this.trigger("drag")};var b=a.event,c=b.special,d=c.drag={not:":input",distance:0,which:1,dragging:!1,setup:function(c){c=a.extend({distance:d.distance,which:d.which,not:d.not},c||{}),c.distance=g(c.distance),b.add(this,"mousedown",e,c),this.attachEvent&&this.attachEvent("ondragstart",h)},teardown:function(){b.remove(this,"mousedown",e),this===d.dragging&&(d.dragging=d.proxy=!1),i(this,!0),this.detachEvent&&this.detachEvent("ondragstart",h)}};c.dragstart=c.dragend={setup:function(){},teardown:function(){}}})(jQuery); | |
| 91 | ||
| 92 | /* jquery.mousewheel.min.js | |
| 93 | * Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net) | |
| 94 | * Licensed under the MIT License (LICENSE.txt). | |
| 95 | * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. | |
| 96 | * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. | |
| 97 | * Thanks to: Seamus Leahy for adding deltaX and deltaY | |
| 98 | * | |
| 99 | * Version: 3.0.6 | |
| 100 | * | |
| 101 | * Requires: 1.2.2+ | |
| 102 | */ | |
| 103 | (function(d){function e(a){var b=a||window.event,c=[].slice.call(arguments,1),f=0,e=0,g=0,a=d.event.fix(b);a.type="mousewheel";b.wheelDelta&&(f=b.wheelDelta/120);b.detail&&(f=-b.detail/3);g=f;void 0!==b.axis&&b.axis===b.HORIZONTAL_AXIS&&(g=0,e=-1*f);void 0!==b.wheelDeltaY&&(g=b.wheelDeltaY/120);void 0!==b.wheelDeltaX&&(e=-1*b.wheelDeltaX/120);c.unshift(a,f,e,g);return(d.event.dispatch||d.event.handle).apply(this,c)}var c=["DOMMouseScroll","mousewheel"];if(d.event.fixHooks)for(var h=c.length;h;)d.event.fixHooks[c[--h]]=d.event.mouseHooks;d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=c.length;a;)this.addEventListener(c[--a],e,!1);else this.onmousewheel=e},teardown:function(){if(this.removeEventListener)for(var a=c.length;a;)this.removeEventListener(c[--a],e,!1);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery); | |
| 104 | ||
| 105 | ||
| 106 | ||
| 107 | ||
| 108 | (function ($) { | |
| 109 | var options = { | |
| 110 | xaxis: { | |
| 111 | zoomRange: null, // or [number, number] (min range, max range) | |
| 112 | panRange: null // or [number, number] (min, max) | |
| 113 | }, | |
| 114 | zoom: { | |
| 115 | interactive: false, | |
| 116 | trigger: "dblclick", // or "click" for single click | |
| 117 | amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out) | |
| 118 | }, | |
| 119 | pan: { | |
| 120 | interactive: false, | |
| 121 | cursor: "move", | |
| 122 | frameRate: 20 | |
| 123 | } | |
| 124 | }; | |
| 125 | ||
| 126 | function init(plot) { | |
| 127 | function onZoomClick(e, zoomOut) { | |
| 128 | var c = plot.offset(); | |
| 129 | c.left = e.pageX - c.left; | |
| 130 | c.top = e.pageY - c.top; | |
| 131 | if (zoomOut) | |
| 132 | plot.zoomOut({ center: c }); | |
| 133 | else | |
| 134 | plot.zoom({ center: c }); | |
| 135 | } | |
| 136 | ||
| 137 | function onMouseWheel(e, delta) { | |
| 138 | e.preventDefault(); | |
| 139 | onZoomClick(e, delta < 0); | |
| 140 | return false; | |
| 141 | } | |
| 142 | ||
| 143 | var prevCursor = 'default', prevPageX = 0, prevPageY = 0, | |
| 144 | panTimeout = null; | |
| 145 | ||
| 146 | function onDragStart(e) { | |
| 147 | if (e.which != 1) // only accept left-click | |
| 148 | return false; | |
| 149 | var c = plot.getPlaceholder().css('cursor'); | |
| 150 | if (c) | |
| 151 | prevCursor = c; | |
| 152 | plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor); | |
| 153 | prevPageX = e.pageX; | |
| 154 | prevPageY = e.pageY; | |
| 155 | } | |
| 156 | ||
| 157 | function onDrag(e) { | |
| 158 | var frameRate = plot.getOptions().pan.frameRate; | |
| 159 | if (panTimeout || !frameRate) | |
| 160 | return; | |
| 161 | ||
| 162 | panTimeout = setTimeout(function () { | |
| 163 | plot.pan({ left: prevPageX - e.pageX, | |
| 164 | top: prevPageY - e.pageY }); | |
| 165 | prevPageX = e.pageX; | |
| 166 | prevPageY = e.pageY; | |
| 167 | ||
| 168 | panTimeout = null; | |
| 169 | }, 1 / frameRate * 1000); | |
| 170 | } | |
| 171 | ||
| 172 | function onDragEnd(e) { | |
| 173 | if (panTimeout) { | |
| 174 | clearTimeout(panTimeout); | |
| 175 | panTimeout = null; | |
| 176 | } | |
| 177 | ||
| 178 | plot.getPlaceholder().css('cursor', prevCursor); | |
| 179 | plot.pan({ left: prevPageX - e.pageX, | |
| 180 | top: prevPageY - e.pageY }); | |
| 181 | } | |
| 182 | ||
| 183 | function bindEvents(plot, eventHolder) { | |
| 184 | var o = plot.getOptions(); | |
| 185 | if (o.zoom.interactive) { | |
| 186 | eventHolder[o.zoom.trigger](onZoomClick); | |
| 187 | eventHolder.mousewheel(onMouseWheel); | |
| 188 | } | |
| 189 | ||
| 190 | if (o.pan.interactive) { | |
| 191 | eventHolder.bind("dragstart", { distance: 10 }, onDragStart); | |
| 192 | eventHolder.bind("drag", onDrag); | |
| 193 | eventHolder.bind("dragend", onDragEnd); | |
| 194 | } | |
| 195 | } | |
| 196 | ||
| 197 | plot.zoomOut = function (args) { | |
| 198 | if (!args) | |
| 199 | args = {}; | |
| 200 | ||
| 201 | if (!args.amount) | |
| 202 | args.amount = plot.getOptions().zoom.amount; | |
| 203 | ||
| 204 | args.amount = 1 / args.amount; | |
| 205 | plot.zoom(args); | |
| 206 | }; | |
| 207 | ||
| 208 | plot.zoom = function (args) { | |
| 209 | if (!args) | |
| 210 | args = {}; | |
| 211 | ||
| 212 | var c = args.center, | |
| 213 | amount = args.amount || plot.getOptions().zoom.amount, | |
| 214 | w = plot.width(), h = plot.height(); | |
| 215 | ||
| 216 | if (!c) | |
| 217 | c = { left: w / 2, top: h / 2 }; | |
| 218 | ||
| 219 | var xf = c.left / w, | |
| 220 | yf = c.top / h, | |
| 221 | minmax = { | |
| 222 | x: { | |
| 223 | min: c.left - xf * w / amount, | |
| 224 | max: c.left + (1 - xf) * w / amount | |
| 225 | }, | |
| 226 | y: { | |
| 227 | min: c.top - yf * h / amount, | |
| 228 | max: c.top + (1 - yf) * h / amount | |
| 229 | } | |
| 230 | }; | |
| 231 | ||
| 232 | $.each(plot.getAxes(), function(_, axis) { | |
| 233 | var opts = axis.options, | |
| 234 | min = minmax[axis.direction].min, | |
| 235 | max = minmax[axis.direction].max, | |
| 236 | zr = opts.zoomRange, | |
| 237 | pr = opts.panRange; | |
| 238 | ||
| 239 | if (zr === false) // no zooming on this axis | |
| 240 | return; | |
| 241 | ||
| 242 | min = axis.c2p(min); | |
| 243 | max = axis.c2p(max); | |
| 244 | if (min > max) { | |
| 245 | // make sure min < max | |
| 246 | var tmp = min; | |
| 247 | min = max; | |
| 248 | max = tmp; | |
| 249 | } | |
| 250 | ||
| 251 | //Check that we are in panRange | |
| 252 | if (pr) { | |
| 253 | if (pr[0] != null && min < pr[0]) { | |
| 254 | min = pr[0]; | |
| 255 | } | |
| 256 | if (pr[1] != null && max > pr[1]) { | |
| 257 | max = pr[1]; | |
| 258 | } | |
| 259 | } | |
| 260 | ||
| 261 | var range = max - min; | |
| 262 | if (zr && | |
| 263 | ((zr[0] != null && range < zr[0]) || | |
| 264 | (zr[1] != null && range > zr[1]))) | |
| 265 | return; | |
| 266 | ||
| 267 | opts.min = min; | |
| 268 | opts.max = max; | |
| 269 | }); | |
| 270 | ||
| 271 | plot.setupGrid(); | |
| 272 | plot.draw(); | |
| 273 | ||
| 274 | if (!args.preventEvent) | |
| 275 | plot.getPlaceholder().trigger("plotzoom", [ plot, args ]); | |
| 276 | }; | |
| 277 | ||
| 278 | plot.pan = function (args) { | |
| 279 | var delta = { | |
| 280 | x: +args.left, | |
| 281 | y: +args.top | |
| 282 | }; | |
| 283 | ||
| 284 | if (isNaN(delta.x)) | |
| 285 | delta.x = 0; | |
| 286 | if (isNaN(delta.y)) | |
| 287 | delta.y = 0; | |
| 288 | ||
| 289 | $.each(plot.getAxes(), function (_, axis) { | |
| 290 | var opts = axis.options, | |
| 291 | min, max, d = delta[axis.direction]; | |
| 292 | ||
| 293 | min = axis.c2p(axis.p2c(axis.min) + d), | |
| 294 | max = axis.c2p(axis.p2c(axis.max) + d); | |
| 295 | ||
| 296 | var pr = opts.panRange; | |
| 297 | if (pr === false) // no panning on this axis | |
| 298 | return; | |
| 299 | ||
| 300 | if (pr) { | |
| 301 | // check whether we hit the wall | |
| 302 | if (pr[0] != null && pr[0] > min) { | |
| 303 | d = pr[0] - min; | |
| 304 | min += d; | |
| 305 | max += d; | |
| 306 | } | |
| 307 | ||
| 308 | if (pr[1] != null && pr[1] < max) { | |
| 309 | d = pr[1] - max; | |
| 310 | min += d; | |
| 311 | max += d; | |
| 312 | } | |
| 313 | } | |
| 314 | ||
| 315 | opts.min = min; | |
| 316 | opts.max = max; | |
| 317 | }); | |
| 318 | ||
| 319 | plot.setupGrid(); | |
| 320 | plot.draw(); | |
| 321 | ||
| 322 | if (!args.preventEvent) | |
| 323 | plot.getPlaceholder().trigger("plotpan", [ plot, args ]); | |
| 324 | }; | |
| 325 | ||
| 326 | function shutdown(plot, eventHolder) { | |
| 327 | eventHolder.unbind(plot.getOptions().zoom.trigger, onZoomClick); | |
| 328 | eventHolder.unbind("mousewheel", onMouseWheel); | |
| 329 | eventHolder.unbind("dragstart", onDragStart); | |
| 330 | eventHolder.unbind("drag", onDrag); | |
| 331 | eventHolder.unbind("dragend", onDragEnd); | |
| 332 | if (panTimeout) | |
| 333 | clearTimeout(panTimeout); | |
| 334 | } | |
| 335 | ||
| 336 | plot.hooks.bindEvents.push(bindEvents); | |
| 337 | plot.hooks.shutdown.push(shutdown); | |
| 338 | } | |
| 339 | ||
| 340 | $.plot.plugins.push({ | |
| 341 | init: init, | |
| 342 | options: options, | |
| 343 | name: 'navigate', | |
| 344 | version: '1.3' | |
| 345 | }); | |
| 346 | })(jQuery); | |
