如何将单击事件处理程序附加到整个HighCharts Gauge控件？

Question

我希望我的用户能够点击我的仪表上的任何地方，然后回复此事件。

目前我正在使用以下绘图选项，但它只能使针头可点击。

有关如何配置此项以使用整个仪表区域的任何想法？我已经更新了我的代码以使用下面建议的方法，但是没有按预期附加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);
            });
        }
    }

});

Answer 1

您可以在图表上使用click event：

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

http://jsfiddle.net/Z3huw/