如何让谷歌交互中的图表角（UI事件）？ [英] How to make interactive Google Charts in Angular (UI-event)?

问题描述

我不知道是否有处理的角谷歌图表API事件的好办法？

（没有足够的信誉，使正确的链接这些引用：）

我使用
[bouil.github.io/angular-google-chart /]

和试图端口
[github.com/angular-ui/ui-map/blob/master/ui-map.js]

的处理事件的方式与
[github.com/angular-ui/ui-utils/blob/master/modules/event/event.js]

---

下面是plunker显示非交互图：

http://plnkr.co/edit/RTx8UgZdEvDmYoPUu4Xf

我想发生的是，把foo（） - 当选择图表中是由方法（显示警报）将被调用。

。

---

模板：

＆LT; D​​IV数据谷歌 - 图图=图级=图UI事件={'图选'：'富（）}＆GT;

指令：

  angular.module（'googlechart.directives'，['ui.event']）。指令（googleChart'，['$超时'，'$窗口'，函数（ $超时，$窗口）{
    返回{
        限制：'A'，
        范围： {
            图：'=图​​'
        }，
        链接：功能（$范围，$榆树，$ ATTR）{
            VAR eventNames =选择现成的onmouseover animationfinish错误的onmouseout         / * ...设置图表和chartwrapper。 * /            google.visualization.events.addListener（$ scope.chartWrapper，'准备好'，函数（）{
                bindChartEvents（$范围，eventNames，$ scope.chartWrapper.getChart（），$榆树）;
            }）;        }
    };
    功能bindChartEvents（范围，eventsStr，图表元素）{
      angular.forEach（eventsStr.split（''），功能（eventName的）{
          google.visualization.events.addListener（图，eventName的，函数（事件）{
              VAR newEventName ='chart-'+ eventName的;
              element.triggerHandler（newEventName，事件）;
              如果（！范围。$$阶段）{
                  。范围$适用（）;
              }
          }）;
      }）;
  }
}]）;
 

解决方案

我放弃了UI事件的一部分，直接注入事件监听器给我传递到指令图表对象。

 函数bindChartEvents（范围）{
   如果（typeof运算$ scope.chart.methods ==未定义＆放大器;！＆安培;！$ typeof运算== scope.chart.methods.select未定义）{
        $ scope.selectListener = google.visualization.events.addListener（$ scope.chartWrapper，选择，函数（事件）{
            $ scope.chart.methods.select（$ scope.chartWrapper.getChart（）getSelection（）事件。）;
        }）;
    }
  }）;
 

I wonder if there is a good way to handle google charts API events in Angular?

(Dont have enough reputation to make proper links out of these references:)

I'm using [bouil.github.io/angular-google-chart/]

and trying to port [github.com/angular-ui/ui-map/blob/master/ui-map.js]

's way of handling events with [github.com/angular-ui/ui-utils/blob/master/modules/event/event.js].

---

Here is a plunker showing non-interactive chart:

http://plnkr.co/edit/RTx8UgZdEvDmYoPUu4Xf

What I would like to happen is that the foo()-method (showing an alert) would get called when a selection is made in the chart.

---

Template:

<div data-google-chart chart="chart" class="chart" ui-event="{'chart-select':'foo()'}">

Directive:

angular.module('googlechart.directives', ['ui.event']).directive('googleChart',     ['$timeout', '$window', function ($timeout, $window) {
    return {
        restrict: 'A',
        scope: {
            chart: '=chart'
        },
        link: function ($scope, $elm, $attr) {
            var eventNames="select ready onmouseover animationfinish error onmouseout";          

         /* ... Set up the chart and chartwrapper. */

            google.visualization.events.addListener($scope.chartWrapper, 'ready', function () {
                bindChartEvents($scope, eventNames, $scope.chartWrapper.getChart(), $elm);
            });

        }
    };
    function bindChartEvents(scope, eventsStr, chart, element) {
      angular.forEach(eventsStr.split(' '), function (eventName) {
          google.visualization.events.addListener(chart, eventName, function (event) {
              var newEventName = 'chart-' + eventName;
              element.triggerHandler(newEventName, event);
              if (!scope.$$phase){
                  scope.$apply();
              }
          });
      });
  }
}]);

解决方案

I dropped the ui-event part and injected eventlisteners directly to the chart-object that I'm passing into the directive.

function bindChartEvents(scope) {
   if(typeof $scope.chart.methods !== "undefined" && typeof $scope.chart.methods.select  !== "undefined"){
        $scope.selectListener = google.visualization.events.addListener($scope.chartWrapper, "select", function (event) {
            $scope.chart.methods.select($scope.chartWrapper.getChart().getSelection(), event);
        });
    }
  });

这篇关于如何让谷歌交互中的图表角（UI事件）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！