限制鼠标跟踪在Flotr2图表范围中显示

Flotr2 hit插件很好用,但有一个缺点:鼠标跟踪有时会超出图表范围显示。如果图表是满屏显示,那这就是个Bug了。其实,很容易就能限制鼠标跟踪始终在图表范围中显示。原理是这样的:鼠标跟踪显示后,如果它的位置超出图表右端,需要重新定位到west方向;它的位置超出图表顶端,重新定位到south方向。依次类推。如下代码:

//east
if(D.size(mouseTrack).width + n.xaxis.d2p(n.x) + m >= this.plotWidth){
  mouseTrack.style.left = 'auto';
  mouseTrack.style.right = m - left - n.xaxis.d2p(n.x) + this.canvasWidth + 'px';
}
//north
if(n.yaxis.d2p(n.y) - D.size(mouseTrack).height - m <= 0){
  mouseTrack.style.top = m + top + n.yaxis.d2p(n.y) + 'px';
  mouseTrack.style.bottom = 'auto';
}
//west 
if(n.xaxis.d2p(n.x) - D.size(mouseTrack).width - m <= 0){
  mouseTrack.style.left = m + left + n.xaxis.d2p(n.x) + 'px';
  mouseTrack.style.right = 'auto';
}
//south 
if(n.yaxis.d2p(n.y) + D.size(mouseTrack).height + m >= this.plotHeight){
  mouseTrack.style.top = 'auto';
  mouseTrack.style.bottom = m - top - n.yaxis.d2p(n.y) + this.canvasHeight + 'px';
}

上述代码一定要加在D.show(mouseTrack);之后,不然取不到鼠标跟踪的宽度和高度。

发表评论