将 api 响应合并到 google 图表

Question

我有如下回复api

{
  "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
   }
  ]
 }

我想插入 report_type 和 Counts 值到 google 图表，但结果是 No Data。我试过在浏览器上使用控制台，没有警告和错误

这是 google 图表脚本

  <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.
    $.ajax({
    url: "https://api-url",
    type: 'GET',
    success: function (reports) {
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Kind Of');
        data.addColumn('number', 'Total');


            data.addRows([reports.data[0].report_type, reports.data[0].Counts]);


        var options = {
          'width':400,
          'height':300
        };
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
});
}
 </script>

  <div class="box-body">
          <div class="chart">
            <div id="chart_div" style="border: 1px solid #ccc"></div>
          </div>
        </div>

我该如何解决这个问题？

谢谢

Answer 1

您可以在下面找到工作代码link https://codepen.io/arung86/pen/aejXdY?editors=1001

var reportData = reports.data.map((item)=>{ return [item.report_type,item.Counts]});
reportData.unshift(['Report Type','Counts']);    
var data = google.visualization.arrayToDataTable(reportData);

将 api 响应合并到 google 图表

Combine api response to google chart

javascript

jquery

json

google-visualization