使用AngularJS和Java动态更新Google Chart

Question

我的目标是动态更新Google图表的数组表。

我无法使用从我的Java类传递的数据更新Google Chart的内容。我在页面加载时使用tempGraph2来初始化图形，但是当用户单击文件名时，java类会传递格式化的字符串，但不会更新图表的内容：

[["Domain names","Domain Count"],["Positive-Female",6],["Positive-   GenderNeutral",0],["Positive-Male",17],["Neutral-Female",6],["Neutral-GenderNeutral",0],["Neutral-Male",8],["Negative-Female",3],["Negative-GenderNeutral",0],["Negative-Male",19]]

使用ng-model链接值，如下所示：

<div ng:model="tempGraph2" 
                     qn:barcolumns="[
                        {type:'string', name: 'Categories'}, 
                        {type:'number', name: 'Counts'}]" 
                     qn:bar="{
                        legend : {position: 'none'},
                        chart: { subtitle: 'popularity by percentage' },
                        chartArea: {height: 400},
                        backgroundColor: '#F7F7F7'}"></div>
            <div ng:model="tempGraph2" 
                     qn:tabcolumns="[
                        {type:'string', name: 'Categories'}, 
                        {type:'number', name: 'Counts'}]" 
                     qn:options="{
                        backgroundColor: '#F7F7F7'}"></div>
<p> {{tempGraph}}</p>
<p>{{tempGraph2}}</p>   

即使使用ng-model，图表也不会更新，但{{tempGraph2}}输出是。以下是javascript的内容。

问题：在我提取新数据后是否需要创建重绘图形的内容，或者是否需要使用另一组逻辑。

app.js：

$scope.tempGraph2 = [['Domain names','Domain Count'],
                        ["placeholder",6],];

$scope.selectJobRow = function(rowIndex) {
    $scope.selectedJobRow = rowIndex;

    if ($scope.selectedJobRow > -1) {
        $scope.showProgress();
        $scope.input.job = $scope.input.jobList[rowIndex];

        var prepFile = {fileName: $scope.input.job.outputFile, data: "test"}

        $http.post("file/graph", prepFile)
        .success(function(data, status) {
            $scope.input.graphData = data;
            $scope.tempGraph2 = $scope.input.graphData.data;
            $scope.hideProgress();
            $scope.tempGraph = [
                                ['Domain names','Domain Count'],
                                ["Positive-Female",123],
                                ["Positive-GenderNeutral",22],
                                ["Positive-Male",4],
                                ["Neutral-Female",6],
                                ["Neutral-GenderNeutral",76],
                                ["Neutral-Male",8],
                                ["Negative-Female",3],
                                ["Negative-GenderNeutral",98],
                                ["Negative-Male",19]
                                ];

        })
        .error(function(data, status) { 
            $scope.hideProgress();
            alert("Failed!!!!");

        });
    }
}

angular.module('charts.table', [
])
.directive('qnOptions', [
    function() {
        return {
            require: '?ngModel',
            link: function(scope, element, attr, controller) {
                var settings = {
                    is3D: true
                };

                var getOptions = function() {
                    return angular.extend({ }, settings, scope.$eval(attr.qnOptions));
                };

                // creates instance of datatable and adds columns from settings
                var getDataTable = function() {
                    var columns = scope.$eval(attr.qnTabcolumns);
                    var data = new google.visualization.DataTable();
                    angular.forEach(columns, function(column) {
                        data.addColumn(column.type, column.name);
                    });
                    return data;
                };

                var init = function() {
                    var options = getOptions();
                    if (controller) {

                        var drawChart = function() {
                            //var data = getDataTable();
                            // set model
                           // data.addRows(controller.$viewValue);

                            var data = new google.visualization.arrayToDataTable(controller.$viewValue);

                            /*var data = new google.visualization.arrayToDataTable([
                                                                                  ['Move', 'Percentage'],
                                                                                  ["Positive-Female",6],
                                                                                  ["Positive-GenderNeutral",0],
                                                                                  ["Positive-Male",17],
                                                                                  ["Neutral-Female",6],
                                                                                  ["Neutral-GenderNeutral",0],
                                                                                  ["Neutral-Male",8],
                                                                                  ["Negative-Female",3],
                                                                                  ["Negative-GenderNeutral",0]
                                                                                  ]);  */

                            // Instantiate and draw our chart, passing in some options.
                            var chart = new google.visualization.Table(element[0]);

                           chart.draw(data);

                        };

                        controller.$render = function() {
                            drawChart();
                        };
                    }

                    if (controller) {
                        // Force a render to override
                        controller.$render();
                    }
                };

                // Watch for changes to the directives options

                scope.$watch(getOptions, init, true);
                scope.$watch(getDataTable, init, true);
            }
        };
    }

]);

我可以从静态数据切换到动态数据之间更新表格。