数据表：表无列
[英]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":{}}
]
}
1 个解决方案
解决方案1
1 已采纳 2015-10-29 13:36:13
如前所述， google.visualization.DataTable希望以不同于所指定格式的格式提供JSON数据。 基本上有两种选择：
- 修改Java servlet以生成
google.visualization.DataTable支持的格式的JSON - 转换生成的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.