2

ユーザーがゲージの任意の場所をクリックして、イベントに応答できるようにしたいと考えています。

現在、次のプロット オプションを使用していますが、ゲージの針をクリックできるようにするだけです。

ゲージ領域全体を使用するようにこれを構成する方法についてのアイデアはありますか? 以下に示す方法を使用するようにコードを更新しましたが、クリック イベントが期待どおりに関連付けられていません。

ここにあるディレクティブを使用しています 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);
            });
        }
    }

});
4

1 に答える 1

0

click eventチャートで使用できます：

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

http://jsfiddle.net/Z3huw/

于 2013-05-28T12:48:49.683 に答える