2013-05-28 2 views
2

사용자가 내 게이지를 아무 곳이나 클릭 한 다음 이벤트에 응답 할 수 있기를 바랍니다.Click 이벤트 핸들러를 전체 HighCharts Gauge 컨트롤에 연결하려면 어떻게해야합니까?

현재 다음 플롯 옵션을 사용하고 있지만 게이지 바늘을 클릭 할 수있게합니다.

전체 게이지 영역을 사용하도록 구성하는 방법에 대한 아이디어가 있습니까? 아래에 제안 된 메서드를 사용하도록 코드를 업데이트했지만 click 이벤트가 예상대로 연결되지 않았습니다. 당신은 차트에 click event을 사용할 수 있습니다 여기에 https://github.com/rootux/angular-highcharts-directive

angular.module('chartsExample.directives',[]) 

.directive('gauge', function() { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     transclude: true, 
     replace: true, 

     link: function (scope, element, attrs) { 
      var chartsDefaults = { 
       chart: { 
        renderTo: element[0], 
        type: "gauge", 
        height: attrs.height || null, 
        width: attrs.width || null, 
        cursor: 'pointer', 
        events:{ 
         click:function(){ 
          alert('click'); 
         } 
        } 
       } 
      }; 

      //Update when charts data changes 
      scope.$watch(function() { return attrs.value; }, function(value) { 
       if(!attrs.value) return; 
       // We need deep copy in order to NOT override original chart object. 
       // This allows us to override chart data member and still the keep 
       // our original renderTo will be the same 
       var deepCopy = true; 
       var newSettings = {}; 
       $.extend(deepCopy, newSettings, chartsDefaults, JSON.parse(attrs.value)); 
       var chart = new Highcharts.Chart(newSettings); 
      }); 
     } 
    } 

}); 

답변

0
+0

덕분에이 나에게 위해 더 나은 방법을 제공하고있다 게이지,하지만 내 경우에는 작동하지 않습니다. AngularJS 지시문을 사용하여 차트를 작성한다는 사실과 함께 할 일이 있습니다. 나는 전체 그림을 반영하도록 내 질문을 업데이트했다. –

+0

그러나 traditinal jquery/div click 이벤트는 어떻게됩니까? http://jsfiddle.net/Z3huw/1/ –

+0

차트의 원래 클릭 이벤트가 트릭을 만들었습니다. 내 지시문에 몇 가지 문제가있었습니다. 작업 결과는 여기에서 볼 수 있습니다. http://jsfiddle.net/Paladin_za/9Z2nd/ –

관련 문제