AngularJS圖表 - 如何在不出錯的情況下加載外部JSON數據

首先，道歉爲真的菜鳥問題。我剛剛跳入Java，JSON等世界，它全部是非常新的我。我已經看遍了所有，但無法找出問題出在哪裏。AngularJS圖表 - 如何在不出錯的情況下加載外部JSON數據

我想顯示一個氣泡圖（簡單吧！），與外部來源數據（qcdata2.json）我認爲作品數據的加載，但懷疑JSON格式不正確。我真的不知道爲什麼它失敗。你知道嗎？我始終得到以下錯誤： angular.js：14525錯誤：[$ http：baddata] http://errors.angularjs.org/1.6.4/ $ http/baddata？p0 =％5B％7B40％2C10％2C20％7D％2C％7B10％2C40％2C50％ 7D％5D％0D％0A & P1 =％7B％7D

<!DOCTYPE html> 
<html> 
<head> 
    <title>Graph View</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <!--<script src="node_modules/angular/angular.min.js"></script>--> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
    <!--<script src="node_modules/chart.js/Chart.min.js"></script>--> 

    <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
    <!--<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>--> 
</head> 

<body ng-app="myApp"> 
    <div id="container" class="container" width=100%> 
     <div class="row" ng-controller="BubbleCtrl"> 
      <div class="col-lg-12"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Bubble chart</div> 
        <div class="panel-body"> 
         <canvas class="chart chart-bubble" chart-data="data" chart-colors="colors" chart-options="options"></canvas> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
    var myApp = angular.module('myApp', ['chart.js']); 

    myApp.controller('BubbleCtrl', function($scope, $http) { 
     $scope.series=[]; 
     $scope.data=[]; 

     $scope.series.push('Series 1'); 
     $scope.data.push({ 
      "x": 40, 
      "y": 10, 
      "r": 20 
     }); 

     //Now try adding Series 2 data 
     $scope.series.push('Series 2'); 
     $scope.data.push({ 
      "x": 50, 
      "y": 30, 
      "r": 10 
     }); 
     console.log($scope.data); 

     //So, now try the external data thing 
     $http.get('qcdata2.json').then(successCallback, errorCallback); 

     function successCallback(response) { 
      console.log("It worked!"); 
      $scope.series.push('Series 3'); 
      $scope.data.push(response.data); 
     } 

     function errorCallback(error) { 
      console.log("Something went wrong"); 
      throw error; 
     } 

    }); 
    </script> 
</body> 

</html>

JSON文件（qcdata2，JSON）內容： { 「數據」：[{ 「×」：10，「Y 「：20，」r「：5 }] }

來源

2017-04-25 FMiles

如果'在'successCallback'是在格式的數據你'的console.log（response.data）你期待什麼呢？即''{{x：40，y：10，r：20}]' – Und3rTow

它不會那麼遠。解析過程似乎失敗，因此直接跳到errorCallback。這是一個讓我難住，嘗試過的一切......我不知道這是否是一個對象與數組的東西.. – FMiles

我對它進行了排序，這要歸功於這裏的有用評論。 Json格式不正確，但更糟糕的是，由於某種原因，我因爲某種原因追逐HOURS的尾部，堅持要緩存先前會話中加載的外部json文件，儘管有任何後期更改。 IE運行良好，每次刷新。如果只有我知道.. – FMiles

您的JSON不是格式正確。下面是它看起來應該像：

{ 
    "data": [{ 
     "x": 40, 
     "y": 10, 
     "r": 20 
    }] 
}

來源

2017-04-25 08:00:14 nocodename

已更新的json數據..仍然沒有去:-( – FMiles

導致相同的錯誤？ – nocodename

我已經讓你成爲一個棘手的例子，它應該如何工作。檢查出來：http：// plnkr .co/edit/N7e5guh0U1ODoCvoLxvk？p =預覽 – nocodename

AngularJS圖表 - 如何在不出錯的情況下加載外部JSON數據

回答

相關問題