我对 jQuery.flot.js 和 flot.pie.js 做了一些修改,以便在我的饼图 Canvas 上制作鼠标离开效果。
在第 585 行 flot.pie.js
function onMouseMove(e) {
triggerClickHoverEvent('plothover', e);
}
function onMouseLeave(e) {
triggerClickHoverEvent('plotleave', e);
}
function onClick(e) {
triggerClickHoverEvent('plotclick', e);
}
在第 127 行 flot.pie.js
if (options.series.pie.show && options.grid.hoverable) {
eventHolder.unbind('mousemove').mousemove(onMouseMove);
eventHolder.unbind('mouseleave').mouseleave(onMouseLeave);
}
在我的 javascript mysite.html
$("#graph1").bind("plothover", pieHover);
$("#graph1").bind("plotleave", pieLeave);
$("#graph1").bind("plotclick", pieClick);
函数mysite.html
function pieHover(event, pos, obj) {
if (!obj) return;
var what = obj.series.name;
$("a[name=" + what + "]").addClass("hover");
$("#world #" + what + " path", svg.root()).attr("fill", "url(#orange)");
$("#world #" + what + " path.water", svg.root()).attr("fill", "#92D7E7");
}
function pieLeave(event, pos, obj) {
if (!obj) return;
var what = obj.series.name;
$("a[name=" + what + "]").removeClass("hover");
$("#world #" + what + " path", svg.root()).attr("fill", "#68CDF2");
$("#world #" + what + " path.water", svg.root()).attr("fill", "#B9E4EE");
}
function pieClick(event, pos, obj) {
if (!obj) return;
percent = parseFloat(obj.series.percent).toFixed(2);
alert('' + obj.series.label + ': ' + percent + '%');
}
我的 pieLeave 函数被完全忽略了。问题是什么?感谢您的帮助。
更多信息:flot example
最佳答案
好的,发生了。您根本不能在绘图上使用 mouseleave,因为绘图是整个 Canvas 容器,唯一的方法是将所有内容绑定(bind)到 mousemove 并检查对象的 na
function pieHover(event, pos, obj)
{
if (!obj) { // if no object (move out of the plot, clear everything)
$("a").removeClass("hover");
$("#world g path", svg.root()).attr("fill", "#68CDF2");
$("#world g path.water", svg.root()).attr("fill", "#B9E4EE");
// return;
}
else { // clear everything, do something.
what = obj.series.name;
$("a").removeClass("hover");
$("#world g path", svg.root()).attr("fill", "#68CDF2");
$("#world g path.water", svg.root()).attr("fill", "#B9E4EE");
$("a[name="+what+"]").addClass("hover");
$("#world #"+what+" path", svg.root()).attr("fill", "url(#orange)");
$("#world #"+what+" path.water", svg.root()).attr("fill", "#92D7E7");
}
}
关于javascript - jQuery flot mouseleave 对我不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5663312/