使用Angular js在Fusion Chart中使用http get請求未加載數據

Question

我正在使用帶有Angular js的Fusion chart，數據使用get請求從json到達，但未加載到Chart。 顯示消息“無數據可顯示”。這是我的控制器代碼。

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

myApp.controller('countByOperator',function($scope,$http)
{
   $http.get("angular/controllers/data/callcountbyoperator.json").success(function(response){
    $scope.dataSource=response.data;
    alert($scope.dataSource);

    FusionCharts.ready(function(){
        var countByOperator=new FusionCharts({
            type:'bar2d',
            renderAt:'countByOperator',
            width:'450',
            dataFormat:'json',
            dataSource:$scope.dataSource
        });
        countByOperator.render();
    });
   });  
});

這是我的html代碼：

<div style="border:1px solid #161616; margin:25px 0;" >
<div class="alBarHead">CALL COUNT BY OPERATORS</div>
<div id="countByOperator" ng-controller="countByOperator"  ng-init="" ng-    model="dataSource"></div>
</div>

Answer 1

考慮到您正在使用Fusioncharts angular-js插件 ，因此無需執行此操作

FusionCharts.ready(function(){
    var countByOperator=new FusionCharts({
        type:'bar2d',
        renderAt:'countByOperator',
        width:'450',
        dataFormat:'json',
        dataSource:$scope.dataSource
    });
    countByOperator.render();
});

如果通過執行$scope.dataSource=response.data;更改模型$scope.dataSource=response.data; 簡單來說，angularjs（然后是Fusioncharts）會自動更新視圖。 多數民眾贊成在使用它。 而且您的html就像

<fusioncharts 
width="60" 
height="400"
type="column2d"
datasource="{{myDataSource}}"
></fusioncharts>

在控制器內部。

如果您沒有使用插件，請將html更改為

<div ng-controller="countByOperator">
    <div id="countByOperator"></div>
</div>

這應該工作。