2010-12-20 4 views
6

jqplot을 사용하여 차트를 그릴 수 있습니다. 그것은 훌륭한 도구이지만 각 차트에 대한 간단한 clickhandler 옵션이 부족합니다. 같은하나의 객체와 이벤트를 연결하는 방법은 무엇입니까? jqplot

자사의 플러그인 하이 라이터, 드래그 커서 jqplot.eventListenerHooks에 (eventListenerHooks.push ([ 'jqplotClick', 콜백]) 자신을 추가하여 jqplot 캔버스에서 클릭/마우스 이벤트를 캡처에 대한 관심을 등록, 예를 들어. 또는 'jqplotMouseDown'또는도 사용할 수 있습니다 보통 $의 .jqplot (대상, 데이터, 옵션) 내 플롯을 한 후

;. 다음 나는이

$.jqplot.eventListenerHooks.push(['jqplotClick', myFunc]);

과연 MYFUNC 할 0123과 함께 플롯을 클릭 할 때마다 호출됩니다., neighbour, dataposgridpos. 이웃 사람이 가장 흥미 롭습니다, 거기에 클릭이 있다면 그것은 내 데이터 포인트를 포함합니다. 이것은 데이터 포인트에 대한 추가 정보가있는 gridpos에 가까운 팝업을 만들기 위해 필요한 데이터입니다.

그러나 문제는 동일한 페이지에 두 개의 차트가 있고 각 jqplot에 대해 다른 콜백을 등록하려고하는 경우입니다. 지금과 같이 두 번째 myFunc2를 등록하면 두 번째 플롯의 모든 클릭도 myFunc를 통과합니다!

jqplot을 변경해야합니까? 뭐라구?

감사

이 잘 설명되어 있지 않습니다

답변

10

,하지만 당신은 그것을 here에 관한 토론을 찾을 수 있습니다.

기본적으로 전에 차트 에 대한 이벤트 처리기를 만들어야 jqplot을 호출하여 실제 차트를 만들 수 있습니다. 그렇게하려면, 당신은 같은 것을 할 필요가 : 당신이 클릭 한 위치 근처의 이웃 데이터 포인트가 있는지 확인 단순한 이벤트 핸들러의

var handler = function(ev, gridpos, datapos, neighbor, plot) { 
    if (neighbor) { 
     alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
    } 
}; 

$.jqplot.eventListenerHooks.push(['jqplotClick', handler]); 

합니다. 당신은 단지 특정 플롯 이벤트를 수신 할 경우,이 같은 뭔가를 할 수 : http://jsfiddle.net/andrewwhitaker/PtyFG/

업데이트 : 여기에 작업의 예를 참조

var handler = function(ev, gridpos, datapos, neighbor, plot) { 
    if (plot.targetId === "#chartdiv") { 
     if (neighbor) { 
      alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
     } 
    } 
    else if (plot.targetId === "#chart2div") { 
     .... 
    } 
    // etc... 
}; 

당신이 #chartdiv를 대체 할 경우에 상관없이 이벤트를 듣고 싶은 차트의 이드가 있습니다. 예제가 업데이트되었습니다.

업데이트 2 :이 방법을 사용하여

$("#chartdiv").bind("jqplotClick", function(ev, gridpos, datapos, neighbor) { 
    if (neighbor) { 
     alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
    } 
}); 

예 2 개 차트, : 플롯 이벤트와 정기적 bind 이벤트를 사용할 수 있습니다처럼이 보이는

http://jsfiddle.net/andrewwhitaker/PtyFG/5/

희망을 그 도와 줘요!

+0

감사합니다. Andrew! 당신이 시간이 있다면, 위의 내 게시물을 참조하십시오. 각각 다른 처리기가있는 두 차트의 경우 어떻게해야합니까? 오, 그리고 링크에 감사드립니다!지금 체크 아웃하십시오. – rapadura

+0

@AntonioP : 문제 없습니다. 방금 내 대답을 업데이트했습니다. –

+0

아! 나는 그것에 대해 생각해 왔지만 그렇게 아름다운 해결책은 아닌 것처럼 보인다. 이벤트는 두 차트로 전파됩니다. 지금 일하고있는 https://bitbucket.org/cleonello/jqplot/src/a806b42e34e2/examples/barTest.html을보고있는 Im ... – rapadura

관련 문제