Передайте событие jquery слою позади ИЛИ сделайте внутренний радиус прозрачным - PullRequest
Новая
       9

Передайте событие jquery слою позади ИЛИ сделайте внутренний радиус прозрачным

0 голосов
/ 05 октября 2011

Я пытаюсь сделать круговую диаграмму поверх другой круговой диаграммы (см. Ниже) и использую библиотеку flot jquery.

http://cadmiumconsulting.com/carlsberg/screenshot_01.jpg

Мне удалось вывести диаграмму правильно, но я хотел бы использовать события мыши на внешней круговой диаграмме.

Моя проблема:

Если я сначала нарисую внешнюю диаграмму с внутренней "сверху", события мыши будут работать только на внутреннем слое.

Если, с другой стороны, я сначала рисую внутреннюю диаграмму и добавляю внешнюю диаграмму «сверху» с внутренним радиусом, внутренний радиус не работает в Internet Explorer 8 и отображает сплошную окружность поверхвнутреннего графика.

Есть идеи о том, как передавать события из одного слоя в другой или форсировать прозрачность внутреннего радиуса?

Любая помощь приветствуется.

ОБНОВЛЕНИЕ- Кажется, есть проблема с «globalCompositeOperation», которая позволила бы прозрачность.Он включен в html5, но не в объект excanvas, который является хаком для репликации объекта canvas в IE8.

Ответы [ 2 ]

0 голосов
/ 07 октября 2011

Кажется, есть проблема с globalCompositeOperation, которая позволила бы прозрачность. Он включен в html5, но не в объект excanvas, который является хаком для репликации объекта canvas в IE8. Решил отказаться от flot для примера, который я строю, и сам создавать диаграммы, используя операции canvas.

0 голосов
/ 05 октября 2011

События путешествуют, поэтому вы должны иметь возможность ориентироваться на графике в фоновом режиме.Я сделал это простое руководство, которое объясняет, как происходят события и как их остановить в jQuery:

Сначала мы создадим наш тестовый DOM 

<div><br/>
    <a class="a1">Im plain simple</a><br/><br/>
    <a class="a2" href="http://google.com">I prevent my own other events</a><br/><br/>
    <a class="a3">I stop other event</a><br/><br/>
    <a class="a4" href="http://google.com">Im shitty</a><br/><br/>
    <a class="a5" href="http://google.com">Im shitty too</a><br/><br/>
</div>

Стиль: 

div {background:red;}
a {color:white;}
a.a1 {background:yellow;color:black;}
a.a2 {background:green;}
a.a3 {background:blue;}
a.a4 {background:orange;}

jQuery:

Мы связываем событие щелчка с div, чтобы проверить наши путешествия 

$("div").bind("click", function(event) {
    alert("div clicked");
});

Событие щелчка, которое в конечном итоге перемещается в div 

$("a.a1").bind("click", function(event) {
    alert("a.a1 clicked");
});

Использование event.preventDefault() предотвращает все $("a.a2") другие связанные события щелчка. 

$("a.a2").bind("click", function(event) {
    event.preventDefault();
    alert("a.a2 clicked\n\nactually I was supposed to go to http://google.com");
});

Использование event.stopPropagation() предотвращает перемещение события щелчка и никогда не запускает события границ в наших div

$("a.a3").bind("click", function(event) {
    event.stopPropagation();
    alert("a.a3 clicked");
});

Теперь мы используем их в комбинации. 

$("a.a4").bind("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    alert("a.a4 clicked\n\nI was also supposed to go to http://google.com");
});

И еще один способ - вернуть false;в конце это также работает для live событий. 

$("a.a5").bind("click", function(event) {
    alert("a.a5 clicked\n\nI was also supposed to go to http://google.com");
    return false;
});

Надеется, что это поможет.

Если вам нужна дополнительная помощь, пожалуйста, напишите какой-нибудь код (где вы привязываете свои события) или пример к своим диаграммам

...