Question

我正在尝试为WordPress的Flot启用工具提示，并且当我添加某个功能时我遇到了问题，我需要根据我试图解读的内容进行操作。

我为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>"

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

用于Wordpress Tooltip插件的Flot麻烦

1 个答案: