X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Fannotations.js;h=8576104036d9e27fcce093358fc8649e48040ed4;hb=e146f6144b47eab0b66f8fd9cb8d84c4615098e6;hp=796d6c39d7c53302b13ea61c4b56ea3a51e395d3;hpb=13f8b0472ff8e7336bdf56f69ff838a1f3e76162;p=dygraphs.git diff --git a/plugins/annotations.js b/plugins/annotations.js index 796d6c3..8576104 100644 --- a/plugins/annotations.js +++ b/plugins/annotations.js @@ -4,6 +4,8 @@ * MIT-licensed (http://opensource.org/licenses/MIT) */ +/*global Dygraph:false */ + Dygraph.Plugins.Annotations = (function() { "use strict"; @@ -54,7 +56,7 @@ annotations.prototype.didDrawChart = function(e) { // Early out in the (common) case of zero annotations. var points = g.layout_.annotated_points; - if (!points || points.length == 0) return; + if (!points || points.length === 0) return; var containerDiv = e.canvas.parentNode; var annotationStyle = { @@ -77,6 +79,10 @@ annotations.prototype.didDrawChart = function(e) { // Add the annotations one-by-one. var area = e.dygraph.plotter_.area; + + // x-coord to sum of previous annotation's heights (used for stacking). + var xToUsedHeight = {}; + for (var i = 0; i < points.length; i++) { var p = points[i]; if (p.canvasx < area.x || p.canvasx > area.x + area.w || @@ -114,12 +120,22 @@ annotations.prototype.didDrawChart = function(e) { } else if (p.annotation.hasOwnProperty('shortText')) { div.appendChild(document.createTextNode(p.annotation.shortText)); } - div.style.left = (p.canvasx - width / 2) + "px"; + var left = p.canvasx - width / 2; + div.style.left = left + "px"; + var divTop = 0; if (a.attachAtBottom) { - div.style.top = (area.h - height - tick_height) + "px"; + var y = (area.y + area.h - height - tick_height); + if (xToUsedHeight[left]) { + y -= xToUsedHeight[left]; + } else { + xToUsedHeight[left] = 0; + } + xToUsedHeight[left] += (tick_height + height); + divTop = y; } else { - div.style.top = (p.canvasy - height - tick_height) + "px"; + divTop = p.canvasy - height - tick_height; } + div.style.top = divTop + "px"; div.style.width = width + "px"; div.style.height = height + "px"; div.title = p.annotation.text; @@ -127,13 +143,13 @@ annotations.prototype.didDrawChart = function(e) { div.style.borderColor = g.colorsMap_[p.name]; a.div = div; - g.addEvent(div, 'click', + g.addAndTrackEvent(div, 'click', bindEvt('clickHandler', 'annotationClickHandler', p, this)); - g.addEvent(div, 'mouseover', + g.addAndTrackEvent(div, 'mouseover', bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this)); - g.addEvent(div, 'mouseout', + g.addAndTrackEvent(div, 'mouseout', bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this)); - g.addEvent(div, 'dblclick', + g.addAndTrackEvent(div, 'dblclick', bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this)); containerDiv.appendChild(div); @@ -147,8 +163,9 @@ annotations.prototype.didDrawChart = function(e) { ctx.moveTo(p.canvasx, p.canvasy); ctx.lineTo(p.canvasx, p.canvasy - 2 - tick_height); } else { - ctx.moveTo(p.canvasx, area.h); - ctx.lineTo(p.canvasx, area.h - 2 - tick_height); + var y = divTop + height; + ctx.moveTo(p.canvasx, y); + ctx.lineTo(p.canvasx, y + tick_height); } ctx.closePath(); ctx.stroke();