Question

我在java脚本中创建了一个漏斗图。并转换为angular现在我正在尝试使用angular中的http.get方法来获取json数据。我被困在这里，并在这部分感到困惑

现在让我告诉你我的代码部分

--- index.html ---

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Funnel 3D Chart</title>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">

      <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script> 
      <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
      <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
      <script type='text/javascript' src='/js/lib/dummy.js'></script>
      <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
      <script src="practice.js"></script>







</head>
<body ng-app="myApp">
  <!-- A funnel 3D Chart showing a conversion analysis in percentage of visiting to purchase in Harry's Supermart website last year 

Attribute :
# showPercentValues - set to 1 to show the values in percentage.

-->

<div id="chart-container" ng-controller="ParentCtrl"  ng-init='load()' ng-model="dataSource1">FusionCharts will render here</div>

</body>


</html>

--- ---的script.js

    // Code goes here

//creating an application module
var myApp = angular.module("myApp", []);

//The below code will read the data from student.json file and will pass to the $scope variable 
 myApp.controller("ParentCtrl", function($scope, $http)
        {   

         $scope.load = function(){
           //alert("2");
    FusionCharts.ready(function () {
      //alert("1");
      var conversionChart = new FusionCharts({
        type: 'funnel',
        renderAt: 'chart-container',
        width: "100%",
        dataFormat: 'json',
        dataSource : "dataSource1"

      });   


      $http.get('chart.json') //reading the studentRecord.json file
            .success 
        (function(data1){
       $scope.dataSource1 = data1;// binding the data to the $scope variable





     }); 









   conversionChart.render();





});

};
});

---- ---- chart.json

{

        "chart": {
                    "caption": "Ensource sales report",
                    "subcaption": "Purchase - Conversion analysis for last year",
                    "decimals": "1",
                    "isHollow": "0",
                    "isSliced": "1",
                    "labelDistance": "15",
                    "plotTooltext": "Success : $percentOfPrevValue",
                    "theme": "fint",
                    "baseFontSize":"18"
        },
            "data": 
            [

                                    {
                                        "label": "Total",
                                        "value": "385634"
                                    },
                                    {
                                        "label": "Contacts",
                                        "value": "175631"
                                    },
                                    {
                                        "label": "Leads",
                                        "value": "84564"
                                    },
                                    {
                                        "label": "Sanctioned",
                                        "value": "35654"
                                    },
                                     {
                                        "label": "Disbursed",
                                        "value": "12342"
                                    }

        ]

}

Plunker：HTTP：http://plnkr.co/edit/HUKvROQv8wIiFfx6uZBk?p=preview

这里我需要获取dataSource :的json数据但不能这样做

漏斗图的所有脚本和css都包含在index.html中。我的工作是使用http.get方法获取json数据.Plz帮我解决这个问题并提前感谢...

Answer 1

您似乎只是将错误的参数传递给dataSource字段。在玩了一些你的plunker之后，而不是传递一个执行$ http调用的函数，我将数据本身传递给它，如下所示。

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

//The below code will read the data from student.json file and will pass to     the $scope variable 
myApp.controller("ParentCtrl", function($scope, $http) {

  $http.get('./chart.json') //reading the studentRecord.json file
  .success(function(data1) {
    $scope.dataSource = data1; // binding the data to the $scope variable

    FusionCharts.ready(function() {
      //alert("1");
      var conversionChart = new FusionCharts({
        type: 'funnel',
        renderAt: 'chart-container',
        width: "100%",
        dataFormat: 'json',
        dataSource: $scope.dataSource
      });
      conversionChart.render();
    });
  });
});

注意我将代码包装在$ http的成功回调中，以便我们知道数据在呈现时就已存在。

你可以看到工作的掠夺者here。

如何在angular中使用http.get方法来获取json数据？

1 个答案: