Angularjs http和谷歌图表 - 错误：指标不是从$ http定义的

Question

我正在使用带谷歌图表的angularjs。如何将http响应传递给“chart1.data”变量？我是否手动设置了下面粘贴的chart1.data = {json oject}。

这是我的控制器：

<?php echo $this->Form->create('Report', array('action' => 'index')); ?>
<div>
    <?php

    echo $this->Form->input('Keyword');
    echo $this->Form->input('Status',
                            array(
                                'options' => $status,
                                'multiple'=> 'false'
                            )  
                        );
    echo $this->Form->input('Child',
                            array(
                                'options' => $children,
                                'multiple'=> 'false'
                            )   
                        );
    echo $this->Form->input('From',
                            array(
                                'id' => 'report_from'
                            )
                        );
    echo $this->Form->input('To',
                            array(
                                'id' => 'report_to'
                            )
                        );
    ?>
    <div class="footer">
        <div>
            <input type="submit" value="Search" name="action">
            <input type="button" value="Cancel" name="action">
        </div>
    </div>
</div>
<?php echo $this->Form->end(); ?>

我的http调用返回以下内容，可以在firebug中看到：

var app = angular.module('myApp', ['googlechart'])
  app.controller('myController', function($scope, $log, $http) {
    $http.get("getCharts")
    .success(function(response) {
         var metrics = response.data;
     });



var chart1 = {};
chart1.type = "google.charts.Line";
chart1.displayed = false;
chart1.data = metrics;
$scope.myChart = chart1;


}).value('googleChartApiConfig', {
    version: '1.1',
    optionalSettings: {
      packages: ['line'],
      language: 'en'
    }



});

这是我的错误：

{"data": {"rows": [{"c": [{"v": "January"}, {"f": "42 items", "v": 19}, {"f": "Ony 12 items", "v": 12
}, {"f": "7 servers", "v": 7}, {"v": 4}]}, {"c": [{"v": "February"}, {"v": 13}, {"f": "1 unit (Out of
 stock this month)", "v": 1}, {"v": 12}, {"v": 2}]}, {"c": [{"v": "March"}, {"v": 24}, {"v": 5}, {"v"
: 11}, {"v": 6}]}], "cols": [{"p": {}, "type": "string", "id": "month", "label": "Month"}, {"p": {},
 "type": "number", "id": "laptop-id", "label": "Laptop"}, {"p": {}, "type": "number", "id": "desktop-id"
, "label": "Desktop"}, {"p": {}, "type": "number", "id": "server-id", "label": "Server"}, {"type": "number"
, "id": "cost-id", "label": "Shipping"}]}}

编辑后我做了这个：

Error: metrics is not defined
@http://127.0.0.1:5000/static/ng-lib/app.js:14:5
e@http://ajax.googleapis.

我现在从firebug得到这个erorr尽管返回了数据：

var metrics;
$http.get("getCharts")
.success(function(response) {
     metrics = response.data;
 });

使用以下解决方法：

Chart not displayed due to error: Cannot draw chart: no data specified.. Full error object follows.
ng-goog...hart.js (line 361)
Object { id="google-visualization-errors-0",  message="Cannot draw chart: no data specified."}


GET http://127.0.0.1:5000/getCharts

200 OK
        9ms 
angular.min.js (line 92)
HeadersResponseJSON

{"data": {"rows": [{"c": [{"v": "January"}, {"f": "42 items", "v": 19}, {"f": "Ony 12 items", "v": 12
}, {"f": "7 servers", "v": 7}, {"v": 4}]}, {"c": [{"v": "February"}, {"v": 13}, {"f": "1 unit (Out of
 stock this month)", "v": 1}, {"v": 12}, {"v": 2}]}, {"c": [{"v": "March"}, {"v": 24}, {"v": 5}, {"v"
: 11}, {"v": 6}]}], "cols": [{"p": {}, "type": "string", "id": "month", "label": "Month"}, {"p": {},
 "type": "number", "id": "laptop-id", "label": "Laptop"}, {"p": {}, "type": "number", "id": "desktop-id"
, "label": "Desktop"}, {"p": {}, "type": "number", "id": "server-id", "label": "Server"}, {"type": "number"
, "id": "cost-id", "label": "Shipping"}]}}