[英]Trouble with Flot for Wordpress Tooltip plugin
我正在尝试为Flot for Wordpress启用工具提示,并在添加某些功能时遇到问题,我需要从网上尝试破译的内容开始工作。
我下载了最新版本的浮动图表工具提示,并在加载插件时加载了脚本。
当以下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>';
使用javascript时,请养成检查调试器控制台中是否有错误的习惯。 这是无效的javascript:
$("<div id="tooltip">" + contents + "</div>")
它产生:
SyntaxError: Unexpected identifier
为什么? 因为引用不正确。
尝试:
"<div id=\"tooltip\">" + contents + "</div>"
工具提示周围的引号被转义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.