Flot for Wordpress工具提示插件故障

Question

我試圖啓用Flot for Wordpress提示工具提示，並且在添加特定功能時遇到了問題，我需要這些工作來嘗試解密onnline。

我下載了最新版本的flot圖表工具提示，並在加載插件時加載了腳本。

當我在下面的js代碼不在代碼中或者下面的函數是空的時候，我創建的圖表非常完美。

任何人都可以告訴我什麼是阻止我的圖表出現的代碼有問題嗎？

提前歡呼，艾倫。

這是代碼，我認爲我需要做提示工作

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

這是當我刪除下面

function showTooltip(x, y, contents) { 
        position: "absolute" 
} 

這裏全碼的代碼裏面是什麼在起作用：

echo ' <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="' . plugins_url($path) . '/flot-for-wp/flot/jquery.flot.js"></script> 
<script language="javascript" type="text/javascript" src="' . plugins_url($path) . '/flot-for-wp/flot/jquery.flot.resize.js"></script> 
<script language="javascript" type="text/javascript" src="' . plugins_url($path) . '/flot-for-wp/flot/excanvas.min.js"></script> 
<link href="' . plugins_url($path) . '/flot-for-wp/flot/layout.css" rel="stylesheet" type="text/css"> 
<div id="placeholder" style="width:95%; height:85%; max-width:100%; margin:auto;"></div> 
'; 
echo ' 
<script language="javascript" type="text/javascript" id="source"> 


var lie_results = [ '; 
foreach($chartdata as $row){ 
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_lie'] . '],'; 
} 
echo ' ]; 

var options_results = [ '; 
foreach($chartdata as $row){ 
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_options'] . '],'; 
} 
echo ' ]; 

var context_results = [ '; 
foreach($chartdata as $row){ 
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_context'] . '],'; 
} 
echo ' ]; 

var decide_results = [ '; 
foreach($chartdata as $row){ 
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_decide'] . '],'; 
} 
echo ' ]; 


var dataset = [ 
    { 
     label: "Lie", 
     data: lie_results 
    }, { 
     label: "Context", 
     data: context_results 
    }, { 
     label: "Options", 
     data: options_results 
    },{ 
     label: "Decide", 
     data: decide_results 
    } 
]; 


var options = { 
    xaxis: { mode: "time", tickSize: [2, "month"] }, 
    yaxes: [{ min: ' .$min_count . ', max: ' .$max_count . ' },{},{},{}], 
    points: { show: true, symbol: "circle", fill: true }, 
    lines: { show: true, }, 
    legend: { noColumns: 0, labelFormatter: function (label, series) { return "<font color=\"white\">" + label + "</font>";}, backgroundColor: "#000", backgroundOpacity: 0.9, labelBoxBorderColor: "#000000", position: "nw"}, 
    grid: { hoverable: true, mouseActiveRadius: 8 } 
}; 


jQuery(document).ready(function($){ 
var placeholder = $("#placeholder"); 
var plot = $.plot(placeholder,dataset,options); 
$("#placeholder").UseTooltip(); 
} 
); 


var previousPoint = null; 

$.fn.UseTooltip = function() { 
    $(this).bind("plothover", function (event, pos, item) {       
     if (item) { 
      if (previousPoint != item.dataIndex) { 
       previousPoint = item.dataIndex; 

       $("#tooltip").remove(); 

       var x = item.datapoint[0]; 
       var y = item.datapoint[1];     

       console.log(x+","+y) 

       showTooltip(item.pageX, item.pageY, 
        x + "<br>" + "<strong>" + y + "</strong> (" + item.series.label + ")"); 
      } 
     } 
     else { 
      $("#tooltip").remove(); 
      previousPoint = null; 
     } 
    }); 
}; 

function showTooltip(x, y, contents) { 
     $("<div id=\'tooltip\'>" + contents + "</div>").css({ 
      position: "absolute", 
      display: "none", 
      top: y + 5, 
      left: x + 20, 
      border: "2px solid #4572A7", 
      padding: "2px",  
      size: "8", 
      opacity: 0.85, 
      background: "#4572A7", 
     }).appendTo("body").fadeIn(200); 
    }; 




</script></div>'; 

Answer 1

當使用JavaScript時，養成檢查調試器控制檯錯誤的習慣。這是無效的javascript：

$("<div id="tooltip">" + contents + "</div>") 

它產生：

SyntaxError: Unexpected identifier 

爲什麼？因爲它沒有正確引用。

嘗試：

"<div id=\"tooltip\">" + contents + "</div>" 

提示周圍的引號轉義。