Jqplot - Как динамически изменить всплывающую подсказку в соответствии с положением точки на сетке? - PullRequest
Новая
       39

Jqplot - Как динамически изменить всплывающую подсказку в соответствии с положением точки на сетке?

1 голос
/ 27 февраля 2020

Сценарий:

Код ниже в 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" ?

1 Ответ

0 голосов
/ 28 февраля 2020

В поисках решения я нашел этот ответ , который позволил мне найти способ. Я не нашел способа изменить tooltipLocation, но, изменив расположение div, я получил желаемое расположение.

Этот ответ показывает, среди прочего, , как узнать координаты x, y точки, и это позволяет узнать, в какой части сетки находятся точка и всплывающая подсказка.

Я включил css и изменил функцию tooltipContentEditor определить координаты X и Y и создать id для div, чтобы был применен соответствующий стиль. Код выглядит следующим образом:

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: 

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 вы можете увидеть перед а здесь после .

...