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

我有一个谷歌图表代码如下

 <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> 

    "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\u type

和

Counts

值更改上面谷歌图表中的

type

和

total

我试着写下面的代码，但是没有结果

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

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

---

谢谢你

我认为你缺少API Url，比如

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

假设API Url位于变量中，因此-

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

---

我认为你缺少API Url，比如

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

假设API Url位于变量中，因此-

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

---

如果以下是您正在接收的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
 }
]

在以下

数据
参数中，

然后你应该在-->
数据上循环。数据


并以-->
value.report\u type
&
value.Counts的形式访问值

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

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

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
变量选项={
宽度：400，
身高：300
};
var arrReport=[['Type'，'Total']；
var数据；
//就这样在这里会失败
$.ajax({
url:“api url”，
键入：“获取”
}).完成（功能（数据）{
图纸（数据）；
}).fail（函数（）{
//例如，使用硬编码数据绘制
风险值数据={
“地位”：200，
“消息”：“确定”，
“数据”：[
{
“_id”：{
“报告类型”：“抢劫”
},
“报告类型”：“抢劫”，
“计数”：11
},
{
“_id”：{
“报告类型”：“财产损失”
},
“报告类型”：“财产损失”，
“计数”：39
},
{
“_id”：{
“报告类型”：空
},
“报告类型”：空，
“计数”：2
}
]
};
图纸（数据）；
});
功能图（数据）{
$.each（data.data，函数（索引，值）{
arrReport.push（[value.report_type，value.Counts]）；
});
figures=google.visualization.arrayToDataTable（arrReport）；
图表。绘制（图形、选项）；
}
});
如果以下是您收到的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
 }
]

在以下
数据
参数中，

然后你应该在-->
数据上循环。数据


并以-->
value.report\u type
&
value.Counts的形式访问值

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

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

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
变量选项={
宽度：400，
身高：300
};
var arrReport=[['Type'，'Total']；
var数据；
//就这样在这里会失败
$.ajax({
url:“api url”，
键入：“获取”
}).完成（功能（数据）{
图纸（数据）；
}).fail（函数（）{
//例如，使用硬编码数据绘制
风险值数据={
“地位”：200，
“消息”：“确定”，
“数据”：[
{
“_id”：{
“报告类型”：“抢劫”
},
“报告类型”：“抢劫”，
“计数”：11
},
{
“_id”：{
“报告类型”：“财产损失”
},
“报告类型”：“财产损失”，
“计数”：39
},
{
“_id”：{
“报告类型”：空
},
“报告类型”：空，
“计数”：2
}
]
};
图纸（数据）；
});
功能图（数据）{
$.each（data.data，函数（索引，值）{
arrReport.push（[value.report_type，value.Counts]）；
});
figures=google.visualization.arrayToDataTable（arrReport）；
图表。绘制（图形、选项）；
}
});

Hi，我已将url更改为变量，但它仍然不起作用Hi，我已将url更改为变量，但它仍然不起作用Hi@WhiteHat，我已尝试了您的代码，修改并使用了一半代码，效果良好。希望您能帮助我的另一个问题Hi@WhiteHat，我已尝试了您的代码，修改并使用了一半代码，这很有效。希望你能帮我解决另一个问题