为什么从AngularJS'内部加载时谷歌图不工作;s控制器.浏览器变白，控制台中没有任何错误

Why google graph not working when loading from inside AngularJS's controller. The browser goes white without any error in console

本文关键字：控制器 浏览器 控制台 错误 任何 工作 AngularJS 内部 加载 谷歌 为什么      更新时间：2023-09-26

这样，当我像在页面加载时一样加载直方图时，它可以很好地工作。

$(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(

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和count的值被打印出来，所以服务正在返回值fine

此外，我可以从loadChart((函数中看到histValues预期地打印在控制台上。

这是一个相关的问题，以防你想要更深入的细节如何从json 创建直方图

只要我把loadChart2()函数放在任何AngularJS onClick或任何函数中，我就会在控制台中获得完全的白色屏幕，没有任何错误。似乎没有人对我的问题发表任何评论，我会在这个页面上不断更新我的发现。

编辑我正在寻求这个问题的解决方案，我问了一个与这个问题有关的问题https://stackoverflow.com/questions/16816782/how-set-charts-data-in-google-chart-tool-directive-module-from-a-dynamically-po

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

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

应用程序

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

查看

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

正如你在这个例子中看到的，我已经制定了一个图表指令，这样你就可以重用它

如果您已经定义了在文档根目录(<html>标记(创建的模块，并且已经设置了一些控制器和指令，那么这里有一个替代方案可以提供一定的灵活性。

在application.js 中

var app = angular.module("chartApp", []);
app.controller("ChartCtrl", function($scope) {
 $scope.buildTable = function() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Name');
    dataTable.addColumn('string', 'Address');
    var options = {showRowNumber: true};
    var table = new google.visualization.Table(angular.element("div#chart")[0]);
    var rows = [...]; //Table data here
    dataTable.addRows(rows);
    table.draw(dataTable, options);
 }
//Other existing controllers and directives

在您的index.html 中

<div id="container" ng-controller="ChartCtrl">
 <div id="chart">Loading...</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="application.js"></script>
<script type="text/javascript" src="google/charts/api"></script>
<script type="text/javascript">
 google.setOnLoadCallback(function() {
            angular.element("div#container" ).scope( ).buildTable();
        });
 google.load('visualization', '1', {packages:['table']});
</script>

有了这种方法，如果谷歌图表组件只是一个更大的应用程序的一个功能，那么它就消除了角度模块之间通信的复杂性。

我还在AngularJS的学习过程中。这个(https://stackoverflow.com/a/15012542/2406758)今天我大吃一惊，我想在接下来的几周里我会取得更大的进步。

它是AngularJS教程的绝佳伴侣，以我在其他任何地方都找不到的方式解释了服务、控制器和指令。还有一些很好的指令示例，有助于理解他所解释的内容。

我不完全确定这是否能解决你的问题，但这是一个很好的开始。

我想你最终会得到类似的东西

<div id='chart' chart-view>

.directive( 'chartView', function ( ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      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);
    }
  };
});

您可以尝试以下URL：

AngularJs谷歌图表工具指令

http://bouil.github.io/angular-google-chart/

相关文章：