Ggplot - 如何根据网格上的点位置动态更改工具提示位置？

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

寻找解决方案我找到了this answer，让我找到了方法。我没有找到改变tooltipLocation 的方法，但是通过改变div 的布局，我得到了想要的定位。

That answer 展示了如何知道该点的 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 中，您可以看到 before 和这里的 after。