为什么从 AngularJS 控制器内部加载时 google graph 不起作用。浏览器变白，控制台中没有任何错误

这样，当我像在页面加载期间一样加载它时，我的直方图就可以正常工作。

$(document).ready()
{
x = new Array(10);
for (var i = 0; i < 10; i++) {
    x[i] = new Array(2);
    x[i][0]="txt";
    x[i][1]=100;

}
loadChart2(x);
}

谷歌柱形图代码：（采用自谷歌图表API https://developers.google.com/chart/interactive/docs/gallery/columnchart#Example)

function loadChart2 (histValues)
{
    console.log('histValues:'+histValues);
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable(histValues);

        var options = {
            hAxis: {title: 'Score', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
};

我的问题：

但是当我从 angularJS 控制器内部调用 loadChart2() 时，整个屏幕变白，浏览器控制台中没有显示错误.

$http({method: 'GET', url: urlGetHistogramData, timeout: maxTime})
            .success(function (data) {
            x=new Array(data.score_hist.length);
            var i=0;
            $.each(data.score_hist, function(){
                x[i] = new Array(2);
                x[i][0]=this.interval_start;
                x[i][1]=this.count;
                i++;
                });


                loadChart2(x);

});

调试信息：

我可以在控制台中看到interval_start and count值被打印，因此服务返回值很好

另外，我还可以看到histValues预期从 loadChart() 函数打印在控制台上。

如果您想了解更深入的详细信息，这是一个相关问题如何从 json 创建直方图 https://stackoverflow.com/questions/16693793/how-to-create-a-historgram-from-json

我一放loadChart2()在任何 AngularJS onClick 或任何函数中，我得到完全白屏，控制台中没有错误。似乎没有人对我的问题发表任何评论，我将用我的发现更新此页面。

Edit我正在寻求解决此问题的方法，我提出了与此问题相关的问题https://stackoverflow.com/questions/16816782/how-set-charts-data-in-google-chart-tool-directive-module-from-a-dynamically-po https://stackoverflow.com/questions/16816782/how-set-charts-data-in-google-chart-tool-directive-module-from-a-dynamically-po

关键是在 Google 图表库加载后手动引导 Angular 模块：

http://jsfiddle.net/nCFd6/22/ http://jsfiddle.net/nCFd6/22/

App

var app = angular.module('app', []);

指示

app.directive('chart', function() {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '=data'
        },
        template: '<div class="chart"></div>',
        link: function(scope, element, attrs) {

            var chart = new google.visualization.LineChart(element[0]);
            var options = {};

            scope.$watch('data', function(v) {

                var data = google.visualization.arrayToDataTable(v);
                chart.draw(data, options);

            });

        }
    };

});

控制器

app.controller('ChartController', function($scope) {

    $scope.scoreHistory = [];
    $scope.loadDataFromServer = function() {

        var x = [
            ['interval', 'count']
        ];

        var scoreHistory = [
            {
                intervalStart: 12,
                count: 20
            },
            {
                intervalStart: 100,
                count: 200
            },
            {
                intervalStart: 200,
                count: 50
            },
            {
                intervalStart: 250,
                count: 150
            }
        ];

        angular.forEach(scoreHistory, function(record, key) {

            x.push([
                record.intervalStart,
                record.count
            ]);

        });

        $scope.scoreHistory = x;

    };

});

Vodoo

google.setOnLoadCallback(function() {

    angular.bootstrap(document, ['app']);

});

google.load('visualization', '1', {packages: ['corechart']});

View

<div ng-controller="ChartController">
    <button ng-click="loadDataFromServer()">load data</button>
    <chart data="scoreHistory"></chart>
</div>

正如您在此示例中看到的，我创建了一个图表指令，以便您可以重用它。