将响应从JSON数组写入Google图表和HTML [英] Write response from JSON Array to Google Chart and HTML

问题描述

我有一个如下所示的Google图表代码

I have a google chart code like below

 <script type="text/javascript">
 // Load the Visualization API and the piechart package.
 google.load('visualization', '1.0', {'packages':['corechart']});

 // Set a callback to run when the Google Visualization API is loaded.
 google.setOnLoadCallback(drawChart);

 // Callback that creates and populates a data table,
 // instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
 // Create the data table.
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Type');    
     data.addColumn('number', 'Total');
     data.addRows([
      ['Damage', 3],
      ['Lost', 1]
    ]);
 // Instantiate and draw our chart, passing in some options.
  var chart = new 
  google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  }
  </script> 

我想插入json api数组，如下所示

I want to insert with json api array like below

    "status": 200,
    "message": "OK",
    "data": [
     {
       "_id": {
       "report_type": "robbery"
        },
        "report_type": "robbery",
        "Counts": 11
      },
      {
         "_id": {
         "report_type": "property_damage"
          },
         "report_type": "property_damage",
          "Counts": 39
     },
     {
        "_id": {
        "report_type": null
         },
        "report_type": null,
        "Counts": 2
     }
    ]

我想用api中的report_type和Counts值更改上面Google图表中的type和total.

I want to change type and total in the google chart above with report_type and Counts value in api.

我尝试在下面编写代码，但结果没有到来

I have tried write code below, but the results is not coming

   function drawChart() {
     $.ajax({
     url: "api-url",
     type: "GET",
     success: function (data) {
       var arrReport = [['Type', 'Total']];

      $.each(data, function (index, value) {
      arrReport.push([value.data.report_type, value.data.Counts]);
     });

     var options = {
    'width':400,
    'height':300
     };

     var figures = google.visualization.arrayToDataTable(arrReport)

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

     chart.draw(figures, google.visualization.PieChart(options));
    }
   });
  }

您知道我的代码在哪里错误吗?

Do you know where's the error from my code ?

谢谢

推荐答案

如果以下是您正在接收的json ...

if the following is the json you are receiving...

"status": 200,
"message": "OK",
"data": [
 {
   "_id": {
   "report_type": "robbery"
    },
    "report_type": "robbery",
    "Counts": 11
  },
  {
     "_id": {
     "report_type": "property_damage"
      },
     "report_type": "property_damage",
      "Counts": 39
 },
 {
    "_id": {
    "report_type": null
     },
    "report_type": null,
    "Counts": 2
 }
]

在以下data自变量中，
那么您应该在-> data.data
上循环 并访问-> value.report_type& value.Counts

in the following data argument,
then you should be looping on --> data.data
and accessing the values as --> value.report_type & value.Counts

  var arrReport = [['Type', 'Total']];

  $.each(data.data, function (index, value) {
    arrReport.push([value.report_type, value.Counts]);
  });

请参阅以下工作摘要...

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  var options = {
    width: 400,
    height: 300
  };
  var arrReport = [['Type', 'Total']];
  var figures;

  // will fail here on SO
  $.ajax({
    url: 'api-url',
    type: 'GET'
  }).done(function (data) {

    drawChart(data);

  }).fail(function () {
    // draw with hard-coded data, for example purposes
    var data = {
      "status": 200,
      "message": "OK",
      "data": [
       {
         "_id": {
         "report_type": "robbery"
          },
          "report_type": "robbery",
          "Counts": 11
        },
        {
           "_id": {
           "report_type": "property_damage"
            },
           "report_type": "property_damage",
            "Counts": 39
       },
       {
          "_id": {
          "report_type": null
           },
          "report_type": null,
          "Counts": 2
       }
      ]
    };

    drawChart(data);

  });

  function drawChart(data) {
    $.each(data.data, function (index, value) {
      arrReport.push([value.report_type, value.Counts]);
    });
    figures = google.visualization.arrayToDataTable(arrReport);
    chart.draw(figures, options);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意:

1)您应该使用较新的库loader.js

1) you should be using the newer library loader.js

<script src="https://www.gstatic.com/charts/loader.js"></script>

根据发行说明，而不是jsapi.

通过jsapi加载器仍然可用的Google Charts版本不再被一致更新.从现在开始，请使用新的静态加载器.

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

这只会更改load语句，请参见上面的代码段.

this will only change the load statement, see above snippet.

2)google.visualization.PieChart-应在此处删除-> chart.draw(figures, options);

2) google.visualization.PieChart -- should be removed here --> chart.draw(figures, options);

这篇关于将响应从JSON数组写入Google图表和HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！