Jqplot-如何根据网格上的点位置定期更改工具提示位置

Question

场景：

jsfidle中的以下代码显示了一些点的图像和文本。

问题：

问题是，我没有找到一种方法来日常更改工具提示的位置，在某些情况下，图像会出现在网格之外。

$(document).ready(function () {
var url= "http://cameraserraverde.com.br/img/"
var line1 = [['01', 650, ""], ['02', 600, url+"img_fev.jpg"], ['04', 330, url+"imagem_abr.jpg"], ['06', 280, ""], ['08', 230, url+"imagem_ago.jpg"], ['10', 320, url+"imagem_out.jpg"],['11', 600, url+"imagem_nov.jpg"], ['12', 630, ""]];    
var plot2 = $.jqplot('test', [line1], {
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{formatString: "%b"},
tickInterval: '1 month'
}
},
series: [{ lineWidth: 2,
}],        
highlighter: { 
show: true,
useAxesFormatters: false,
tooltipContentEditor: tooltipContentEditor,
},        
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
div = "<div>";
if (plot.data[seriesIndex][pointIndex][2] != ""){
div+= "<img src='" + plot.data[seriesIndex][pointIndex][2] + "''/>";
}
div+= "<figcaption style='text-align: center; background:#D0D0D0'>" + plot.data[seriesIndex][pointIndex][1] + "m</figcaption></div>"
return div;
}
});

问题是：

如何定义与点位置相对的tooltipLocation，例如，如果点位于网格的象限"ne">上，则将tooltipLocation定义为"sw">？

Answer 1

在寻找解决方案时，我找到了这个答案，让我找到了一种方法。我没有找到改变tooltipLocation的方法，但通过改变div的布局，我得到了想要的定位。

这个答案显示了如何知道点的x，y坐标，这可以让你找出点和工具提示在网格的哪个部分。

我包含了一个css，并更改了tooltipContentEditor函数以识别X和Y坐标，并为div创建了一个id，以便应用适当的样式。代码如下：

CSS：

#tooltipdivnw {
position: absolute;
bottom: 0px;
right: 0px;
}
#tooltipdivsw {
position: absolute;
top: 12px;
right: 0px;
}
#tooltipdivne {
position: absolute;
bottom: 0px;
left: 8px;
}
#tooltipdivse {
position: absolute;
top: 12px;
left: 12px;
}

函数工具提示内容编辑器：

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
var div = "<div"; 
// get X, Y of point in grid
var data = plot.series[seriesIndex].data;
var x = plot.axes.xaxis.series_u2p(data[pointIndex][0]);
var y = plot.axes.yaxis.series_u2p(data[pointIndex][1]);
// Point on the right or left portion of the grid?
var loc = ( x > ( plot.grid._plotDimensions.width / 2) );
// In top or bottom portion?      
loc =  (loc << 1 ) | ( y > ( plot.grid._plotDimensions.height / 2) );
switch (loc) {                                                          
case 0 : div+= " id='tooltipdivse'>";  // point in top-left, div in 'se'
break;
case 1 : div+= " id='tooltipdivne'>";  // point in bottom-left, div in 'ne'
break;
case 2 : div+= " id='tooltipdivsw'>";  // point in top-right, div in 'sw'
break;
case 3 : div+= " id='tooltipdivnw'>";  // point in bottom-right, div in 'nw'
break;
}
// if have an image, add
if (plot.data[seriesIndex][pointIndex][2] != ""){
div+= "<img src='" + plot.data[seriesIndex][pointIndex][2] + "''/>";
}
div+= "<figcaption style='text-align: center; background:#D0D0D0'>" + 
plot.data[seriesIndex][pointIndex][1] + "m</figcaption></div>"
return div;
}

在这个jsfidle中，您可以看到前面和后面。