Javascript Wordpress工具提示插件的Flot出现问题

我正在尝试为Wordpress启用Flot的工具提示，当我添加某个函数时，我遇到了一些问题，我需要它来从我试图在Nline上破译的内容开始工作

我下载了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);
    }

以下是完整代码：

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>';

echo'
';
回声'
var lie_结果=['；
foreach（$chartdata作为$row）{
回显“[”.$row['mentalerrors\U date']”，“.$row['mentalerrors\U lie']”，”；
}
回声']；
var选项_结果=['；
foreach（$chartdata作为$row）{
回显“['.$row['mentalerrors\U date'.]”、“.$row['mentalerrors\U options'.]”、”；
}
回声']；
var context_results=['；
foreach（$chartdata作为$row）{
回显“['.$row['mentalerrors\U date'.]”、“.$row['mentalerrors\U context'.]”、”；
}
回声']；
var decision_results=['；
foreach（$chartdata作为$row）{
回显“[”.$row['mentalerrors_date']”，“.$row['mentalerrors_DECUE']”，”；
}
回声']；
变量数据集=[
{
标签：“谎言”，
数据：lie_结果
},  {
标签：“上下文”，
数据：上下文和结果
}, {
标签：“选项”，
数据：选项和结果
},{
标签：“决定”，
数据：决定结果
}
];
变量选项={
xaxis:{mode:“time”，tickSize:[2，“month”]}，
yaxes:[{min:'.$min_count.'，max:'.$max_count.}，{}，{}，{}，{}]，
要点：{show:true，符号：“圆”，fill:true}，
行：{show:true，}，
图例：{noColumns:0，labelFormatter:function（label，series）{return”“+label+”；}，backgroundColor:#000，backgroundOpacity:0.9，labelBoxBorderColor:#000000，位置：“nw”}，
网格：{hoverable:true，mouseActiveRadius:8}
};
jQuery（文档）.ready（函数（$）{
变量占位符=$（“#占位符”）；
变量绘图=$.plot（占位符、数据集、选项）；
$（“#占位符”）.UseTooltip（）；
}
);
var-previousPoint=null；
$.fn.UseTooltip=函数（）{
$（this）.bind（“plothover”，函数（事件、位置、项）{
如果（项目）{
if（上一个点！=item.dataIndex）{
previousPoint=item.dataIndex；
$（“#工具提示”）.remove（）；
var x=项目数据点[0]；
变量y=项目数据点[1]；
console.log（x+，“+y）
显示工具提示（item.pageX、item.pageY、，
x+“
”+“”+y+“（“+item.series.label+”）；
}
}
否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});
};
函数显示工具提示（x、y、内容）{
$（“+contents+”）.css({
位置：“绝对”，
显示：“无”，
顶部：y+5，
左：x+20，
边框：“2px实心#4572A7”，
填充：“2px”，
尺码：“8”，
不透明度：0.85，
背景：“4572A7”，
}).appendTo（“body”）.fadeIn（200）；
};
';

使用javascript时，要养成检查调试器控制台错误的习惯。这是无效的javascript：

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

为什么?？因为它没有被正确引用

尝试：

“”+内容+“”

---

工具提示周围的引号已转义。

太棒了，谢谢。我还在学习Javascript。图表现在加载了代码，因此它一定是丢失的\号。现在来解决代码问题，使工具提示正常工作！！对学习JS的好网站有什么建议吗？刚刚找到chrome调试器，它又给了我两个错误[link]@Alan，第一个错误是由第二个错误引起的。第二个错误表示尚未定义

$.fn

）。请确保在代码执行之前加载jquery。我已经检查了我页面的源代码，它在顶部加载。我已经检查了我页面的源代码，它在顶部加载为

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

SyntaxError: Unexpected identifier

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