2017-10-17 55 views
0

I m trying to use a *chart using JQ widget* ,below snippet contains my controller code, When I m使ajax調用從服務器獲取數據然後 i m able to get the response but the chart takes previous data of that variable i.e. undefined . If i m硬編碼控制器中的相同數據然後工作。 我猜想它的承擔價值,我應該如何發送ajax響應數據到圖表。JQ Widgets圖表與AngularJS顯示錯誤

我對這些事情很陌生,請讓我知道在這種情況下我應該怎麼做才能將數據發送到圖表。

在UI這是我的標籤: -

JQDemo.controller("charts", function ($scope, $timeout,$http) { 
 
\t // prepare chart data as an array 
 
// var sampleData = [ 
 
//   { State: 'Maharastra', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 }, 
 
//   { State: 'Karnataka', AccountsOpened: 25, VerificationPending: 25, Rejected: 0}, 
 
//   { State: 'Tamil Nadu', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 }, 
 
//   { State: 'AP', AccountsOpened: 20, VerificationPending: 20, Rejected: 25}, 
 
//   { State: 'Bihar', AccountsOpened: 0, VerificationPending: 20, Rejected: 25 }, 
 
//   { State: 'Odisha', AccountsOpened: 30, VerificationPending: 0, Rejected: 30}, 
 
//   { State: 'UP', AccountsOpened: 20, VerificationPending: 40, Rejected: 0 } 
 
//  ]; 
 
\t 
 
\t var sampleData=[{"AccountsOpened":"2","State":"AP","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Calcutta","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"2","State":"Delhi","VerificationPending":"1","Rejected":"5"},{"AccountsOpened":"2","State":"Maharastra","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Odisha","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"1","State":"UP","VerificationPending":"1","Rejected":"6"}] ; \t \t \t 
 
// \t var sampleData ; 
 
// \t $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8"; 
 
// $http({ 
 
// \t \t \t url : 'charts', 
 
// \t \t  method : "POST" 
 
// \t \t }).then(function(response) { 
 
// \t \t \t sampleData =JSON.stringify(response.data); 
 
// \t \t \t }); \t 
 
//  
 
    
 
    // prepare jqxChart settings 
 
    var settings = { 
 
     title: "Enrollment Status", 
 
     description: "State-Wise Enrollments", 
 
     enableAnimations: true, 
 
     showLegend: true, 
 
     padding: { left: 5, top: 5, right: 5, bottom: 5 }, 
 
     titlePadding: { left: 40, top: 0, right: 0, bottom: 10 }, 
 
     // source: $scope.chartdata, 
 
     source: sampleData, 
 
     rtl: true, 
 
     xAxis: 
 
      { 
 
       dataField: 'State', 
 
       showTickMarks: true, 
 
       tickMarksInterval: 1, 
 
       tickMarksColor: '#888888', 
 
       unitInterval: 1, 
 
       showGridLines: false, 
 
       gridLinesInterval: 1, 
 
       gridLinesColor: '#888888', 
 
       axisSize: 'auto' 
 
      }, 
 
     colorScheme: 'scheme01', 
 
     seriesGroups: 
 
      [ 
 
       { 
 
        type: 'stackedcolumn', 
 
        columnsGapPercent: 100, 
 
        seriesGapPercent: 5, 
 
        valueAxis: 
 
        { 
 
         unitInterval: 10, 
 
         minValue: 0, 
 
         maxValue: 100, 
 
         displayValueAxis: true, 
 
         description: 'Enrollments in Thousands', 
 
         axisSize: 'auto', 
 
         tickMarksColor: '#888888', 
 
         gridLinesColor: '#777777' 
 
        }, 
 
        series: [ 
 
          { dataField: 'AccountsOpened', displayText: 'AccountsOpened' }, 
 
          { dataField: 'VerificationPending', displayText: 'VerificationPending' }, 
 
          { dataField: 'Rejected', displayText: 'Rejected'} 
 
         ] 
 
       } 
 
      ] 
 
    }; 
 
    $scope.chartSettings = settings; 
 
});

回答

0

JQDemo.controller("charts", function ($scope, $timeout,$http) { 
 
    \t // prepare chart data as an array 
 
    // var sampleData = [ 
 
    //   { State: 'Maharastra', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 }, 
 
    //   { State: 'Karnataka', AccountsOpened: 25, VerificationPending: 25, Rejected: 0}, 
 
    //   { State: 'Tamil Nadu', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 }, 
 
    //   { State: 'AP', AccountsOpened: 20, VerificationPending: 20, Rejected: 25}, 
 
    //   { State: 'Bihar', AccountsOpened: 0, VerificationPending: 20, Rejected: 25 }, 
 
    //   { State: 'Odisha', AccountsOpened: 30, VerificationPending: 0, Rejected: 30}, 
 
    //   { State: 'UP', AccountsOpened: 20, VerificationPending: 40, Rejected: 0 } 
 
    //  ]; 
 
    \t 
 
    \t var sampleData=[{"AccountsOpened":"2","State":"AP","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Calcutta","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"2","State":"Delhi","VerificationPending":"1","Rejected":"5"},{"AccountsOpened":"2","State":"Maharastra","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Odisha","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"1","State":"UP","VerificationPending":"1","Rejected":"6"}] ; \t \t \t 
 
    // \t var sampleData ; 
 
    // \t $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8"; 
 
    // $http({ 
 
    // \t \t \t url : 'charts', 
 
    // \t \t  method : "POST" 
 
    // \t \t }).then(function(response) { 
 
    // \t \t \t sampleData =JSON.stringify(response.data); 
 
     // prepare jqxChart settings 
 
     var settings = { 
 
      title: "Enrollment Status", 
 
      description: "State-Wise Enrollments", 
 
      enableAnimations: true, 
 
      showLegend: true, 
 
      padding: { left: 5, top: 5, right: 5, bottom: 5 }, 
 
      titlePadding: { left: 40, top: 0, right: 0, bottom: 10 }, 
 
      // source: $scope.chartdata, 
 
      source: sampleData, 
 
      rtl: true, 
 
      xAxis: 
 
       { 
 
        dataField: 'State', 
 
        showTickMarks: true, 
 
        tickMarksInterval: 1, 
 
        tickMarksColor: '#888888', 
 
        unitInterval: 1, 
 
        showGridLines: false, 
 
        gridLinesInterval: 1, 
 
        gridLinesColor: '#888888', 
 
        axisSize: 'auto' 
 
       }, 
 
      colorScheme: 'scheme01', 
 
      seriesGroups: 
 
       [ 
 
        { 
 
         type: 'stackedcolumn', 
 
         columnsGapPercent: 100, 
 
         seriesGapPercent: 5, 
 
         valueAxis: 
 
         { 
 
          unitInterval: 10, 
 
          minValue: 0, 
 
          maxValue: 100, 
 
          displayValueAxis: true, 
 
          description: 'Enrollments in Thousands', 
 
          axisSize: 'auto', 
 
          tickMarksColor: '#888888', 
 
          gridLinesColor: '#777777' 
 
         }, 
 
         series: [ 
 
           { dataField: 'AccountsOpened', displayText: 'AccountsOpened' }, 
 
           { dataField: 'VerificationPending', displayText: 'VerificationPending' }, 
 
           { dataField: 'Rejected', displayText: 'Rejected'} 
 
          ] 
 
        } 
 
       ] 
 
     }; 
 
     $scope.chartSettings = settings; 
 
    }); 
 

 

 
    

//    }); 
//  
+0

這不工作..仍然是同樣的問題 – RD063