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

Question

我希望我的用户能够单击仪表上的任意位置，然后响应事件。

目前我正在使用以下绘图选项，但它只会使量规指针可点击。

关于如何配置它以使用整个仪表区域的任何想法？我已经更新了我的代码以使用下面建议的方法，但点击事件没有按预期附加。

我正在使用此处找到的指令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/