Question

我在.Net MVC图表中创建了谷歌组织结构图正确显示。但是我必须获得关于图表节点上的点击事件的一些信息，例如他们的employee.id，employee.name。

我尝试使用下面的代码段，但是，它不起作用。

 google.visualization.events.addListener(chart1, 'ready', function () {
        alert("3");
        // grab a few details before redirecting
        google.visualization.events.addListener(chart.getChart(), 'select', function () {
            chartObject = chart.getChart();
            alert(data.getValue(chartObject.getSelection()[0].row, 0));
        }); 
    });

在下面的代码中添加点击事件代码的方式和位置？

 var app = angular.module('myApp', []);
        app.controller('myController', ['$scope', '$http', function ($scope, $http) {
            //alert("dddd");
            // window.alert("hi!");
            //here http get method for get data from database
            $scope.chartData = [['Name', 'ReportsTo', 'tooltip']];
            $http.get('/home/getChartData').then(function (response) {
                var newobject = [['Name', 'ReportsTo', 'tooltip']];
                angular.forEach(response.data, function (val) {
                    newobject.push(
                        [
                         {
                            v: val.EmployeeID.toString(),
                            f: '<div class="customBox"><div>' + (val.FirstName + ' '
                                + val.LastName) +
                                '</div><div class="title" id="' + val.EmployeeID + '">'
                                + val.Title + '</div></div>'
                            },
                            (val.ReportsTo.toString() == "0" ? "" : val.ReportsTo.toString()),
                            (val.FirstName + ' ' + val.LastName)
                        ]
                        );
                })
                $scope.chartData = newobject;
            })
        }])
        app.directive('orgChart', function () {

            function link($scope, element, attrs) {
                var chart = new google.visualization.OrgChart(element[0]);
                $scope.$watch('chartData', function (value, oldvalue) {

                    if (!value) {
                        return;
                    }
                    var data = google.visualization.arrayToDataTable(value);
                    var options = {
                        'title': '',
                        'allowHtml': true
                    }
                    chart.draw(data, options);
                })
            }
            return {
                link: link
            };
        })

图表： - 点击第一个节点我必须生成点击事件。

Answer 1

您尝试实施的代码是ChartWrapper，
您使用的是OrgChart

var chart = new google.visualization.OrgChart(element[0]);

尝试以下内容，应立即按照上面的行^

google.visualization.events.addListener(chart, 'select', function () {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    alert(data.getValue(selection[0].row, 0));
  }
});

注意：请务必检查上面选择的长度

当取消选择某事时，该事件也会触发，
这将返回一个空数组，
导致此失败 - ＆gt; selection[0].row

点击事件获取angularjs中谷歌组织结构图节点的选定值

1 个答案: