獲取flot工具提示出現問題

Question

我試圖讓flot工具提示出現，但沒有任何事情發生。有誰能告訴我我做錯了什麼嗎？也許它不會識別我的觀點，它們出現在圖表上（y軸上的人數，x軸上的年數）。

$.post('php/myprogram.php', 
       function(output){ 
         var obj = jQuery.parseJSON(output); 
         var data = []; 
         var coordinate = []; 
         for (var i = 0; i< obj.length-1; i++) { 
          coordinate.push(obj[i][0]); 
          coordinate.push(obj[i][1]); 
          data.push(coordinate); 
          coordinate = []; 
         } 

          var options = { 
           xaxis: { 
            axisLabel: 'YEAR', 
            axisLabelUseCanvas: true, 
            axisLabelFontSizePixels: 15, 
            axisLabelFontFamily: 'Arial', 
            tickDecimals: 0 
           }, 
           yaxis: { 
            axisLabel: '', 
            axisLabelUseCanvas: true, 
            axisLabelFontSizePixels: 15, 
            axisLabelFontFamily: 'Arial' 
           }, 
           series: { 
            lines: { 
             show: true, 
             color: '#ffa500' 
            }, 
            points: { 
             show: true 
            } 
           }, 
           grid: { 
            hoverable: true 
           } 
          }; 

          $.plot($("#byYear"), 
            [data], 
            options 
          ); 


         function showTooltip(x, y, contents) { 
          $("<div id='tooltip'>" + contents + "</div>").css({ 
           position: "absolute", 
           display: "none", 
           top: y + 5, 
           left: x + 5, 
           border: "1px solid #fdd", 
           padding: "2px", 
           "background-color": "#fff", 
           opacity: 0.80 
          }).appendTo("body").fadeIn(200); 

         } 


         $("#byYear").bind("plothover", function (event, pos, item) { 
           var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")"; 
           //$("#hoverdata").text(str); 

           if (item) { 
            if (previousPoint != item.dataIndex) { 

             previousPoint = item.dataIndex; 

             $("#tooltip").remove(); 
             var x = item.datapoint[0].toFixed(2); 
             var y = item.datapoint[1].toFixed(2); 

             showTooltip(item.pageX, item.pageY, str); 
            } 
           } else { 
            $("#tooltip").remove(); 
            previousPoint = null;    
           } 

         }); //end bind 
       }); 

Answer 1

@Raidri部分是對的 - 我的工具提示需要在我的代碼之外。但是，我不得不做了不同的方式：

HTML：（我包括僅僅是基本的海軍報碼）

<div id="tooltip"></div> 
<div id="byYear"></div> 

CSS：

#byYear { 
    width: 50%; 
    height: 100%; 
} 
#tooltip { 
    position: absolute; 
    display: none; 
    border: 1px solid black; 
    padding: 2px 5px; 
    background-color: white; 
    opacity: 0.80; 
    z-index: 5; 
} 

的jQuery：

$.post('php/myprogram.php', 
       function(output){ 
         var obj = jQuery.parseJSON(output); 
         var data = []; 
         var coordinate = []; 
         for (var i = 0; i< obj.length-1; i++) { 
          coordinate.push(obj[i][0]); 
          coordinate.push(obj[i][1]); 
          data.push(coordinate); 
          coordinate = []; 
         } 

          var options = { 
           xaxis: { 
            axisLabel: 'YEAR', 
            axisLabelUseCanvas: true, 
            axisLabelFontSizePixels: 15, 
            axisLabelFontFamily: 'Arial', 
            tickDecimals: 0 
           }, 
           yaxis: { 
            axisLabel: '', 
            axisLabelUseCanvas: true, 
            axisLabelFontSizePixels: 15, 
            axisLabelFontFamily: 'Arial' 
           }, 
           series: { 
            lines: { 
             show: true, 
             color: '#ffa500' 
            }, 
            points: { 
             show: true 
            } 
           }, 
           grid: { 
            hoverable: true 
           } 
          }; 

          $("#byYear").bind("plothover", function (event, pos, item) { 
           if (item) { 
             var x = item.datapoint[0].toFixed(0), 
              y = item.datapoint[1].toFixed(0); 

             $("#tooltip").html(y + " instances") 
              .css({top: item.pageY+5, left: item.pageX+5}) 
              .fadeIn(200); 
            } else { 
             $("#tooltip").hide(); 
            } 

          }); 
          $.plot($("#byYear"), 
            [data], 
            options 
          ); 



       }); 

Answer 2

在這個fiddle中工作得很好。

但是您可以在$.post()回調中定義showTooltip()和bind()函數。這意味着在多次ajax呼叫後，您可以多次呼叫plothover函數。嘗試移動$.post()回調中的兩個函數。

Answer 3

您可以使用「flot.tooltip」插件，而不是自己處理plothover事件。