[英]Data Table : Table has no columns
我得到的表沒有column。×問題,我不能弄清楚為什么...您能幫我了解怎么了嗎?
我的HTML:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.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: "<JSON URL>",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
JAVA代碼:
我使用的代碼類似於示例中顯示的代碼
我的JSON:
{
"rows":[
{
"cells":[
{
"value":{"value":"A","objectToFormat":"A","null":false,"type":"TEXT"},
"formattedValue":null,
"customProperties":{},
"null":false,
"type":"TEXT"
},
{
"value":{"value":"1","objectToFormat":"1","null":false,"type":"TEXT"},
"formattedValue":null,
"customProperties":{},
"null":false,
"type":"TEXT"
}
],
"customProperties":{}
},
{
"cells":[
{
"value":{"value":"B","objectToFormat":"B","null":false,"type":"TEXT"},
"formattedValue":null,
"customProperties":{},
"null":false,
"type":"TEXT"
},
{
"value":{"value":"0","objectToFormat":"0","null":false,"type":"TEXT"},
"formattedValue":null,
"customProperties":{},
"null":false,
"type":"TEXT"
}
],
"customProperties":{}
}
],
"customProperties":{},
"warnings":[],
"localeForUserMessages":null,
"numberOfRows":2,
"numberOfColumns":2,
"columnDescriptions":[
{"id":"Option","type":"TEXT","label":"Option","pattern":"","customProperties":{}},
{"id":"Count","type":"TEXT","label":"Count","pattern":"","customProperties":{}}
]
}
如前所述, google.visualization.DataTable
希望以不同於所指定格式的格式提供JSON數據。 基本上有兩種選擇:
google.visualization.DataTable
支持的格式的JSON 下面演示了如何將提供的JSON數據轉換為與google.visualization.DataTable
兼容(第二個選項)
// 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: "<JSON URL>", dataType: "json", async: false }).responseText;*/ var jsonData = { "rows": [ { "cells": [ { "value": { "value": "A", "objectToFormat": "A", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" }, { "value": { "value": "1", "objectToFormat": "1", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" } ], "customProperties": {} }, { "cells": [ { "value": { "value": "B", "objectToFormat": "B", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" }, { "value": { "value": "0", "objectToFormat": "0", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" } ], "customProperties": {} } ], "customProperties": {}, "warnings": [], "localeForUserMessages": null, "numberOfRows": 2, "numberOfColumns": 2, "columnDescriptions": [ { "id": "Option", "type": "TEXT", "label": "Option", "pattern": "", "customProperties": {} }, { "id": "Count", "type": "TEXT", "label": "Count", "pattern": "", "customProperties": {} } ] }; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(convertToDataTableJson(jsonData)); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, { width: 400, height: 240 }); } function convertToDataTableJson(json) { var outJson = { cols: [], rows: []}; json.columnDescriptions.forEach(function(c){ outJson.cols.push({ "id": c.id, "label": c.label, "pattern": c.pattern, "type": c.type == "TEXT" ? "string" : "number" }); }); json.rows.forEach(function(r){ var cells = {c : []}; r.cells.forEach(function(c){ cells.c.push({ "v": c.value.value, "f": null }); }); outJson.rows.push(cells); }); return outJson; }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <div id="chart_div"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.