将JSON数据添加到谷歌饼图

问题描述 投票:-1回答:1

我想将Json数据添加到我的饼图中,但无法找到方法

这是一个获取JSon数据的控制器,我想将它添加到饼图中

  var app = angular.module('myapp', []);


   app.controller("piecontroller", function ($scope,$http) {
    $scope.msg = "hi";

        $http.get("http://10.155.4.219:8080/gst/rest/test/approved") .then(function(response) {
        $scope.mydata = response.data;


    });
});

以下代码是饼图的js文件我添加了一些硬编码值,但我需要动态添加JSON数据'

     google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([


          ['status', 'count'],
  ['Deemed approved', 185],
  ['approved', 628],

        ]);

        var options = {
          title: 'New Resgisteration'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
           }

JSON数据

{
    "Details": [{
        "count": "185",
        "type": "Deemed approved ",
        "desc": "New registration"
    }, {
        "count": "628",
        "type": "Approved ",
        "desc": "New registration"
    }]
}
javascript angularjs json
1个回答
0
投票
  var app = angular.module('myapp', []);


   app.controller("piecontroller", function ($scope,$http) {
    $scope.msg = "hi";

        $http.get("http://10.155.4.219:8080/gst/rest/test/approved") .then(function(response) {
        console.log(response.data);
        $scope.mydata = response.data;
        drawChart(response.data); // or pass response.data;
    });
});

 google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart(data) {
        var chartArray = data.Details.map(item =>[item.type, item.count]);
        chartArray.push(['Task', 'Hours per Day'])
        var data = google.visualization.arrayToDataTable(chartArray);

        var options = {
          title: 'New Resgisteration'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
           }
© www.soinside.com 2019 - 2024. All rights reserved.