谷歌可視化 - 第0行無效的行類型

我必須在谷歌可視化的餅圖上可視化url json數據。我的代碼似乎是因爲它必須是爲了這個目的，但我在控制檯中得到'行0無效的行類型'錯誤。數據格式有問題嗎？如果有人能夠提供幫助，那將非常感激。這裏是我的代碼：谷歌可視化 - 第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>

謝謝。

來源

2014-01-24 Stelios Voskos

的JSON不代表其可以轉化爲2維陣列google.visualization.DataTable可以簡單地不能解釋該數據。每個項目包含複雜的子項目，如location和outcome_status。
你必須包括列 - arrayToDataTable is very specific about that。
最重要的是：您如何將這些數據想象爲一個餅圖？第一級只有一個特定號碼字段，。您不能根據各種字符串生成餅圖。

但是，你可以消毒數據並顯示它們作爲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和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); 
}

最後創建表（）：

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

來源

2014-01-24 16:57:48 davidkonrad

謝謝您的建議。明確的幫助！試圖讓餅圖工作。再次感謝 –

@ AndreUk13，gr8 :)是的，如果你從子項目中獲得一些值，我認爲你很容易就可以產生一個有意義的餅圖。快樂編程！ – davidkonrad

試圖解析json中的嵌套數據（特別是位置和outcome_status）並將它們輸出到表中，但沒有成功。我不知道是否因爲Google可視化數據的格式不好。實際上，我得到的大小不等於2（表中的列數）。 –

谷歌可視化 - 第0行無效的行類型

回答

相關問題