gpt4 book ai didi

javascript - 如何在 Angular 中制作交互式 Google 图表(UI 事件)?

转载 作者:行者123 更新时间:2023-11-28 02:01:53 25 4
gpt4 key购买 nike

我想知道是否有好的方法可以在 Angular 中处理 google 图表 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() 方法(显示警报)。

<小时/>

模板:

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

指令:

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();
}
});
});
}
}]);

最佳答案

我删除了 ui-event 部分,并将事件监听器直接注入(inject)到我传递到指令中的图表对象中。

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);
});
}
});

关于javascript - 如何在 Angular 中制作交互式 Google 图表(UI 事件)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18338115/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com