Javascript 在angularjs中为google图表使用restful api服务输入(json数据)

Javascript 在angularjs中为google图表使用restful api服务输入(json数据),javascript,html,angularjs,google-visualization,Javascript,Html,Angularjs,Google Visualization,我是新手。 你能帮我满足以下要求吗 要求:如何传递json格式的restful api数据,并将数据呈现在google图表中并以html显示 问候 Satyanvesh使用谷歌图表指令 //load the google chart & table library google.load('visualization', '1', { packages: ['corechart', 'table'] }); //declare our c

我是新手。 你能帮我满足以下要求吗

要求:如何传递json格式的restful api数据,并将数据呈现在google图表中并以html显示

问候
Satyanvesh使用谷歌图表指令

    //load the google chart & table library
    google.load('visualization', '1', {
        packages: ['corechart', 'table']
    });

    //declare our chartWrapModule, in write up we had this in a separate file called googleChartWrap.js.
    angular.module('googleChartWrap', [])
        .directive('googleChart', function () {
        return {
            restrict: 'A',
            link: function ($scope, $elm, $attr) {
                //watch the actual property since haveWantStats will point to a resource and exist almost immediately even prior to pulling the data.
                $scope.$watch($attr.data, function (value) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'name');
                    data.addColumn('number', 'votes');

                    angular.forEach(value, function (row) {
                        data.addRow([row.name, row.votes]);
                    });

                    var options = {
                        title: $attr.title,
                        height: $attr.height,
                        width: $attr.width,
                        legend: 'bottom'
                    };

                    //render the desired chart based on the type attribute provided
                    var chart;
                    switch ($attr.type) {
                        case ('PieChart'):
                            chart = new google.visualization.PieChart($elm[0]);
                            break;
                        case ('ColumnChart'):
                            chart = new google.visualization.ColumnChart($elm[0]);
                            break;
                        case ('BarChart'):
                            chart = new google.visualization.BarChart($elm[0]);
                            break;
                        case ('Table'):
                            chart = new google.visualization.Table($elm[0]);
                            break;
                    }
                    chart.draw(data, options);
                });
            }
        }
    });


    //declare our angular module, injecting the 'googleChartWrap' module as a dependency
    angular.module('myApp', ['googleChartWrap'])
        .controller('coffeeController', function ($scope) {
        /**
         *  provide some data to use in our charts. On a real project you'd usually
         *  use an angular service to retrieve data from a web service endpoint somewhere.
         */
        $scope.coffeeData = [{
            "name": "Starbucks",
                "votes": 36
        }, {
            "name": "Costa",
                "votes": 34
        }, {
            "name": "Coffee Bean",
                "votes": 30
        }];
    });