Question

首先，为真正的菜鸟问题道歉。我刚刚进入java，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）内容： { “数据”：[{ “x”：10， “y”：20， “r”：5 }] }

Answer 1

您的JSON格式不正确。这是它应该是这样的：

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

AngularJS图表 - 如何加载外部JSON数据而不会出现错误

1 个答案: