在angularjs中为谷歌图表使用restful api服务输入（json数据）

Question

我是 Angular JS 的新手。 您能帮我解决以下要求吗

需求：如何传递json格式的restful api数据，并在google图表中渲染数据并以html显示。

问候 萨提扬韦什

Answer 1

使用 google-charts 指令。 example in here

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