highcharts : 나는 내가 일하고 있어요 웹 응용 프로그램에 HighCharts을 사용하고

Question

모든,

전체 차트에서 마우스 이벤트 또는 캡처 마우스 클릭을 트래핑에서 차트를 중지하고 일반적으로, 나는 그것을 매우 좋아한다.

그러나 ENTIRE 차트에서 마우스를 클릭하는 방법을 파악하는 데 어려움을 겪고 있습니다.

즉, 사용자가 차트에서 아무 곳이나 클릭하면 (예 : 그림 영역, 제목, x 축 또는 y 축, 차트 요소 주위의 여백 및 패딩 등) 알고 싶습니다. .)

또는 이벤트를 모두 비활성화하여 컨테이너 자체에 이벤트를 트랩 할 수 있습니다.

자세한 버전 ...

내 HighChart가 포함 된 DIV가 있습니다. 사용자가 아무데도 그 DIV 내를 클릭하면

나는 알고 싶어요.

처음에는 "onclick"이벤트를 DIV에 첨부하려고했지만 클릭이 HighChart에 의해 갇히게되어 아마도 해고 당하지 않습니다.

그래서, HighChart을 설정하는 코드에서, 나는이 추가 :

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: "container", 
     events: { 
      click: function(event) { 
       // do something 
      } 
     }, 
     ... 
    } 
    ... 
}); 

이것은 사용자가 플롯 영역 내 어느 곳에서 클릭 경우 OK 작동하지만, 그녀가 다른 곳을 클릭하지 않을 경우 (예 : x 축, y 축, 제목, 차트 요소 주변의 패딩 등)

따라서 전체 차트를 클릭 할 수있게하려면 어떻게해야합니까?

미리 감사드립니다.

Answer 1

나는이 동일한 문제가있었습니다.

웹킷 관리자를 사용하면 Highcharts가 클릭 이벤트를 차트 컨테이너 ('highcharts-container'클래스의 div)에 바인딩한다는 것을 알 수 있습니다. 이는 클릭을 방해하는 것 같습니다.

당신이 클릭 이벤트의 기능 중 하나가, 당신은 그렇지

chart.container.onclick = null;

를 설정하여 제거 할 수 있습니다하지 않는 한, 당신은 사용해야합니다 내장 highcharts 이벤트 속성에 콜백을 설정하십시오. OP가 지적했듯이 차트 개체를 클릭 할 때 트리거해야하는 차트 개체의 '이벤트'속성이 있습니다. 시리즈 자체를 클릭 할 때 트리거되는 플롯 옵션에 대한 이벤트 속성도 있습니다.지역 플롯에 대한 예를 들어

:

var chart = new Highcharts.Chart({ 
    ... 
    plotOptions: { 
     area: { 
      events: { 
       click: function(event) { 
        // do something 
       } 
      }, 
     ... 
     } 
    } 
    ... 
}); 

더 추가 정보를 참조하십시오 http://www.highcharts.com/ref/#plotOptions-area-events

Answer 2

나는이에 달리고, highcharts에서 이벤트를 클릭 거품 highcharts 3에 대한 확장/플러그인을 썼다 :

/*global Highcharts*/ 
(function (Highcharts) { 
    "use strict"; 

    Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerClick', function (original, e) { 
     var pointer = this, 
      parent = pointer.chart.container.parentNode, 
      bubbleUp = true; 

     // Add a method to the event to allow event handlers to prevent propagation if desired 
     e.swallowByHighCharts = function() { bubbleUp = false; }; 

     // Call the original event 
     original.apply(this, Array.prototype.slice.call(arguments, 1)); 

     // Trigger the event on the container's parent (to bubble the event out of highcharts) 
     // unless the user wanted to stop it 
     if (bubbleUp && typeof parent !== 'undefined' && parent) { 
      jQuery(pointer.chart.container.parentNode).trigger(e); 
     } 
    }); 

}(Highcharts)); 

이렇게 추가하면 모든 클릭 이벤트가 하이 차트 컨테이너 밖으로 버블 링됩니다. 컨테이너 자체에서 트리거하면 하이 차트와 jquery가 이벤트 발생과 상호 작용하는 방식으로 인해 루핑 톤이 발생합니다. 적어도 내 경우에는 렌더 타겟으로 사용되는 요소에 실제로 아무 핸들러도 없었습니다. 내 의견으로는,

config = { 
    chart: { ... } 
    plotOptions: { 
     series: { 
      point: { 
       events: { 
        click: function(e) { 
         // Don't pass along clicks on series points for one reason or another 
         e.swallowByHighCharts(); 
        } 
       } 
      } 
     } 
    } 
} 

Answer 3

매우 늦게 대답,하지만 여전히 필요, 즉 -

swallowByHighCharts에 대한 여분의 비트가 필요한 경우 새 동작을 사용하지 않도록 설정이 가능합니다. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/

$(function() { 
    $('#chart1').highcharts({ 
     ... 
    }); 


    $('.chart-container').bind('mousedown', function() { 
     $(this).toggleClass('modal'); 
     $('.chart', this).highcharts().reflow(); 
    }); 
});