2013-05-28 2 views
2

Я бы хотел, чтобы мои пользователи могли щелкнуть в любом месте моего датчика, а затем ответить на это событие.Как подключить обработчик события кликов ко всему элементу управления HighCharts Gauge?

В настоящее время я использую следующие параметры сюжета, но это только делает иглу калибра интерактивной.

Любые идеи о том, как настроить это, чтобы использовать всю зону измерения? Я обновил свой код, чтобы использовать метод, предложенный ниже, но событие click не привязано, как ожидалось.

Я использую директиву, как здесь 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

Вы можете использовать click event на графике:

http://api.highcharts.com/highcharts#chart.events.click

http://jsfiddle.net/Z3huw/

+0

Благодаря это дало мне лучший подход для Калибровка, но не работает в моем случае. Я думаю, что у него есть что-то, что связано с тем, что я создаю диаграмму, используя директиву AngularJS. Я обновил свой вопрос, чтобы отразить полную картину. –

+0

Но как насчет события jQuery/div clickTrditinal? http://jsfiddle.net/Z3huw/1/ –

+0

Ваше первоначальное событие click на диаграмме сделало трюк. У меня были некоторые проблемы в моей директиве. Рабочий результат можно увидеть здесь. http://jsfiddle.net/Paladin_za/9Z2nd/ –