JavaScript-第0行的Google可视化-无效行类型

2019-11-22 07:31:34 阅读：243 来源： 互联网

标签：google-visualization javascript php

我必须使用Google可视化来可视化饼图上的url json数据.我的代码似乎已达到目的,但是在控制台中出现“行0的行类型无效”错误.数据格式是否有问题？如果有人可以提供帮助,将不胜感激.这是我的代码：

<?php
    $json = file_get_contents('http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2013-01'); 
    $json = str_replace("\xe2\x80\xa8", '\\u2028', $json);
    $json = str_replace("\xe2\x80\xa9", '\\u2029', $json);
    echo $json;
?>

JavaScript：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

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

function drawChart() {
  var jsonData = $.ajax({
      url: "getData.php",
      dataType:"json",
      async: false
      }).responseText;

  //Create an array of the JSON data and then create our data table out of JSON data loaded from server.
  var array = JSON.parse(jsonData);
  var dataTableData = new google.visualization.arrayToDataTable(array);
  var table = google.visualization.DataTable(dataTableData);

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

</script>
</head>

<body>
<div id="chart_div"></div>
</body>

谢谢.

解决方法:

> JSON不代表可以转换为二维数组google.visualization.DataTable的数据,因此无法解释该数据.每个项目都包含复杂的子项目,例如location和result_status.
>您必须包括列-arrayToDataTable is very specific about that.
>最重要的：您如何想象这些数据以饼图的形式呈现？第一层只有一个特定的数字字段location_subtype.您不能基于各种字符串生成饼图.

但是,您可以清理数据并将其显示为google.visualization.Table：

首先用一些列创建一个DataTable：

var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string','category');
dataTable.addColumn('string','context');
dataTable.addColumn('string','id');
dataTable.addColumn('number','location_subtype');
dataTable.addColumn('string','location_type');
dataTable.addColumn('string','month');
dataTable.addColumn('string','persistent_id');

将您的jsonData转换为JSON

var json=JSON.parse(jsonData);

清理并插入数据.在这里,我只是删除location和result_status子项,但是您可能想从这些子项中提取值,并将其作为列插入dataTable中：

for (var i=0;i<json.length;i++) {
   delete json[i].location;
   delete json[i].outcome_status;
   var row = [];        
   for (var item in json[i]) {
     row.push(json[i][item]);
   }        
   dataTable.addRow(row);
}

最后创建Table()：

var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(dataTable, {width: 1000, height: 300});

结果将如下所示：

更新

var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string','category');
dataTable.addColumn('string','context');
dataTable.addColumn('number','id');
dataTable.addColumn('string','location_subtype');
dataTable.addColumn('string','location_type');
dataTable.addColumn('string','month');
dataTable.addColumn('string','persistent_id');
dataTable.addColumn('string','street name');
dataTable.addColumn('string','outcome status');

json=JSON.parse(jsonData);

for (var i=0;i<json.length;i++) {
    var row = [];       
    row.push(json[i].category);
    row.push(json[i].context);
    row.push(json[i].id);
    row.push(json[i].location_subtype);
    row.push(json[i].location_type);
    row.push(json[i].month);
    row.push(json[i].persistent_id);
    row.push(json[i].location.street.name);
    row.push(json[i].outcome_status ? json[i].outcome_status.category : "null");
    dataTable.addRow(row);
}

标签：google-visualization,javascript,php
来源： https://codeday.me/bug/20191122/2057878.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript-第0行的Google可视化-无效行类型