将 JSON 数组的响应写入 Google 图表和 HTML

Question

我有一个 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.
     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 数组，如下所示

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

我想将上面 google 图表中的 type 和 total 更改为 api 中的 report_type 和 Counts 值。

我试过在下面写代码，但是结果不出来

   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));
    }
   });
  }

你知道我的代码哪里出错了吗？

谢谢

Answer 1

我认为你缺少 API Url 喜欢，

$.ajax({
       url: "api-url",
       type: "GET",
       success: function (data) {
});

假设变量中的 API Url 所以它应该是-

$.ajax({
           url: api-url,
           type: "GET",
           success: function (data) {
    });

Answer 2

如果以下是您收到的 json...

"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

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

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

请参阅以下工作片段...

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

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

而不是 jsapi，根据 release notes...

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 语句，请参阅上面的代码段。

2) google.visualization.PieChart -- 这里应该去掉 --> chart.draw(figures, options);

将 JSON 数组的响应写入 Google 图表和 HTML

Write response from JSON Array to Google Chart and HTML

html

javascript

jquery

charts

google-visualization