个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 20:41:08 25 4
gpt4 key购买 nike

我必须使用谷歌可视化在饼图上可视化 url json 数据。我的代码似乎必须达到目的，但我在控制台中收到“第 0 行的无效行类型”错误。数据格式有问题吗？如果有人可以提供帮助，将不胜感激。这是我的代码:

PHP:

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

谢谢。

最佳答案

  1. JSON 不表示可以转换为二维数组 的数据 google.visualization.DataTable 根本无法解释这一点。每个项目都包含复杂的子项目，例如 location 和 outcome_status。

  2. 您必须包括列 - arrayToDataTable is very specific about that .

  3. 最重要的是:您究竟如何想象将这些数据呈现为饼图？第一层只有一个特定的数字字段，location_subtype。您不能根据各种字符串生成饼图。

但是，您可以清理数据并将它们显示为 google.visualization.Table:

首先创建一个包含一些列的数据表:

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

结果会是这样的:

enter image description here

更新

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

关于javascript - Google 可视化 - 第 0 行的行类型无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21333727/

25 4 0
文章推荐： java - java jar文件输出上的php exec是空数组
文章推荐： php - Linux odbc fatal error : Allowed memory size
文章推荐： session - PHP session : Generate a variable and save it for session
文章推荐： php - curl 到 Laravel 导致重定向
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com