5

This way my histogram works fine,when I load it like during page load.

$(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);
}

Google column chart code: (adopted from Google charting 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);
    }
};

My problem:

But when I call loadChart2() from inside my angularJS controller, entire screen becomes white and no error is shown in browser console.

$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);

});

Debugging info:

I can see in console that interval_start and count values are printed, so service is returning values fine

Also, I can see histValues expectantly printed on console from loadChart() function.

Here is a related question, in case you want more in-depth details How to create a historgram from json

As soon as I put loadChart2() function in any AngularJS onClick or any function, I get total white screen with no error in console. It seems, none has any comment on my problem, I will keep this page updated with my findings on this.

Edit I am pursuing a solution to this problem, I asked a question related to this issue https://stackoverflow.com/questions/16816782/how-set-charts-data-in-google-chart-tool-directive-module-from-a-dynamically-po

4

4 回答 4

9

关键是在 Google 图表库加载后手动引导您的 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;

    };

});

巫毒

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>

正如您在此示例中所看到的，我制作了一个图表指令，以便您可以重复使用它。

于 2013-05-29T16:05:04.247 回答
2

如果您已经定义了在文档根目录（<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>

使用这种方法，如果 Google Charts 组件只是您已经拥有的更大应用程序的一个功能，那么它消除了角度模块之间通信的复杂性。

于 2013-10-14T19:00:50.970 回答
1

我还在学习 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);
    }
  };
});
于 2013-05-23T20:42:59.927 回答
1

你可以试试下面的网址：

AngularJs 谷歌图表工具指令

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

于 2013-06-04T11:28:12.503 回答