Блог

Главная - Вопросы по программированию - jQuery flot mouseleave у меня не работает

jQuery flot mouseleave у меня не работает

#javascript #jquery #html #flot #pie-chart

#javascript #jquery #HTML #flot #круговая диаграмма

Вопрос:

Я изменил свой jQuery.flot.js и flot.pie.js немного, чтобы создать эффект mouseleave на моем круговом холсте.

в строке 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 amp;amp; 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

Комментарии:

1. что такое flot? можете ли вы передать ссылку или демонстрацию того, как это должно работать? и вам действительно следует поработать над своим отступом

2. пример для flot 🙂

3. и на самом деле flot.pie.js демо-версия работы

4. поскольку Google Chrome 10.0 его не поддерживает, все, что я вижу, это желтая круговая диаграмма, однако она работает на ff, я бы посоветовал, если что-то настолько фундаментально неправильно в таком известном браузере, держаться подальше от этого 🙂 найдите другое решение. В противном случае у вас есть примеры справа. путь ко многим ошибкам в его основном скрипте. остальное неважно

Ответ №1:

Ладно, случилось. Вы просто не можете использовать mouseleave на графике, потому что график — это весь контейнер canvas, единственный способ сделать это, если привязать все к 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");
    }
}