来自 php 的 Google Table Chart 创建了 Json
Posted
技术标签:
【中文标题】来自 php 的 Google Table Chart 创建了 Json【英文标题】：Google Table Chart from php created Json 【发布时间】：2017-01-16 20:52:30 【问题描述】：我正在尝试创建一个 Google 表格图表，其中包含我使用 php 从我的数据库中导出并编码为 json 的信息。 (momJson.php) 我得到一个空白页，我不知道为什么。任何帮助将不胜感激！
PS我可以直接用php从mysql数据库做一个表，但是我想用同样的信息来做多个图表，所以我想我会从一个简单的开始。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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.charts.load('current', 'packages':['table']);
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawTable);
function drawTable()
var jsonData = $.ajax(
url: "momJson.php",
dataType:"json",
async: false
).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, showRowNumber: true, width: '100%', height: '100%');
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="table_div"></div>
</body>
</html>
JSON 数据（我确实在 JSONLint.com 验证过）
["schoolid":"10007","prizeprogram":"APP","datereceived":"20160415","numberstudents":"292","participatingstudents":"69","studentresponse":"0.23","numberbooklets":"91","numbernames":"762","numberorders":"43","orderresponse":"0.05","tov":"1606.52","numbersubscriptions":"64","saleweek":"160122","***":"2.10","vps":"5.50","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Iaeger Elementary School","schoolcity":"Iaeger","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"A","mdrcode":"1\r","schoolid":"10013","prizeprogram":"RSR","datereceived":"20160208","numberstudents":"256","participatingstudents":"58","studentresponse":"0.22","numberbooklets":"78","numbernames":"638","numberorders":"54","orderresponse":"0.08","tov":"2111.23","numbersubscriptions":"80","saleweek":"160108","***":"3.30","vps":"8.24","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Mount Hope Elementary School","schoolcity":"Mount Hope","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10027","prizeprogram":"RBR","datereceived":"20150914","numberstudents":"315","participatingstudents":"49","studentresponse":"0.15","numberbooklets":"57","numbernames":"540","numberorders":"52","orderresponse":"0.09","tov":"1716.61","numbersubscriptions":"73","saleweek":"150904","***":"3.17","vps":"5.44","schoolcat":"7","lowgrade":"PK","highgrade":"8","schooltype":"E","schoolname":"Webster Springs Elementary School","schoolcity":"Webster Springs","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"","mdrcode":"1\r","schoolid":"10051","prizeprogram":"WCR","datereceived":"20150923","numberstudents":"240","participatingstudents":"41","studentresponse":"0.17","numberbooklets":"53","numbernames":"459","numberorders":"56","orderresponse":"0.12","tov":"1745.10","numbersubscriptions":"69","saleweek":"150911","***":"3.80","vps":"7.27","schoolcat":"7","lowgrade":"PK","highgrade":"4","schooltype":"E","schoolname":"Sutton Elementary School","schoolcity":"Sutton","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10052","prizeprogram":"RSR","datereceived":"20160217","numberstudents":"675","participatingstudents":"212","studentresponse":"0.31","numberbooklets":"241","numbernames":"2338","numberorders":"287","orderresponse":"0.12","tov":"10415.68","numbersubscriptions":"407","saleweek":"160129","***":"4.45","vps":"15.43","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Daniels Elementary School","schoolcity":"Daniels","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"5","mdrcode":"1\r","schoolid":"10053","prizeprogram":"RSWB","datereceived":"20160205","numberstudents":"351","participatingstudents":"204","studentresponse":"0.58","numberbooklets":"231","numbernames":"2250","numberorders":"391","orderresponse":"0.17","tov":"14056.06","numbersubscriptions":"545","saleweek":"160115","***":"6.24","vps":"40.04","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Arthur I Boreman Elementary School","schoolcity":"Middlebourne","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10057","prizeprogram":"RSWS","datereceived":"20160302","numberstudents":"265","participatingstudents":"64","studentresponse":"0.24","numberbooklets":"84","numbernames":"707","numberorders":"106","orderresponse":"0.14","tov":"3932.80","numbersubscriptions":"158","saleweek":"160205","***":"5.56","vps":"14.84","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"East*** Elementary School","schoolcity":"Winfield","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10065","prizeprogram":"RBR","datereceived":"20150921","numberstudents":"210","participatingstudents":"26","studentresponse":"0.12","numberbooklets":"34","numbernames":"290","numberorders":"42","orderresponse":"0.14","tov":"1539.27","numbersubscriptions":"60","saleweek":"150911","***":"5.30","vps":"7.32","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Salt Rock Elementary School","schoolcity":"Salt Rock","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"","mdrcode":"1\r","schoolid":"10066","prizeprogram":"WCR","datereceived":"20150828","numberstudents":"220","participatingstudents":"67","studentresponse":"0.30","numberbooklets":"94","numbernames":"743","numberorders":"66","orderresponse":"0.08","tov":"2371.85","numbersubscriptions":"96","saleweek":"150814","***":"3.19","vps":"10.78","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Cox Landing Elementary School","schoolcity":"Lesage","schoolstate":"WV","dateupdated":"2016-06-06 11:57:34","testcode":"","mdrcode":"1\r","schoolid":"10095","prizeprogram":"APP","datereceived":"20160223","numberstudents":"300","participatingstudents":"50","studentresponse":"0.16","numberbooklets":"63","numbernames":"552","numberorders":"49","orderresponse":"0.08","tov":"1857.94","numbersubscriptions":"77","saleweek":"160122","***":"3.36","vps":"6.19","schoolcat":"7","lowgrade":"PK","highgrade":"6","schooltype":"E","schoolname":"Beale Elementary School","schoolcity":"Gallipolis Ferry","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"A","mdrcode":"1\r","schoolid":"10104","prizeprogram":"WCR","datereceived":"20150929","numberstudents":"80","participatingstudents":"35","studentresponse":"0.43","numberbooklets":"45","numbernames":"386","numberorders":"48","orderresponse":"0.12","tov":"1708.43","numbersubscriptions":"67","saleweek":"150918","***":"4.42","vps":"21.35","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Hillsboro Elementary School","schoolcity":"Hillsboro","schoolstate":"WV","dateupdated":"2016-06-06 11:57:34","testcode":"","mdrcode":"1\r","schoolid":"10143","prizeprogram":"WCR","datereceived":"20150915","numberstudents":"400","participatingstudents":"172","studentresponse":"0.43","numberbooklets":"206","numbernames":"1899","numberorders":"193","orderresponse":"0.10","tov":"6286.01","numbersubscriptions":"251","saleweek":"150821","***":"3.31","vps":"15.71","schoolcat":"7","lowgrade":"PK","highgrade":"2","schooltype":"E","schoolname":"Moorefield Elementary School","schoolcity":"Moorefield","schoolstate":"WV","dateupdated":"2016-06-06 11:57:34","testcode":"","mdrcode":"1\r","schoolid":"10159","prizeprogram":"RSR","datereceived":"20160203","numberstudents":"165","participatingstudents":"68","studentresponse":"0.41","numberbooklets":"89","numbernames":"756","numberorders":"48","orderresponse":"0.06","tov":"1588.47","numbersubscriptions":"65","saleweek":"160108","***":"2.10","vps":"9.62","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Prichard Elementary School","schoolcity":"Prichard","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r"]
【问题讨论】：
检查控制台中的错误？请分享jsonData的样本
我添加了 momJson.php 文件返回的 jsondata。
【参考方案1】：
为了直接从jsonData创建DataTable，
它必须采用谷歌理解的格式
以下是标准格式的示例，
在DataTable constructor method 参考下的示例中找到
var data = new google.visualization.DataTable(
cols: [
id: 'task', label: 'Task', type: 'string',
id: 'hours', label: 'Hours per Day', type: 'number'
],
rows: [
c:[v: 'Work', v: 11],
c:[v: 'Eat', v: 2],
c:[v: 'Commute', v: 2],
c:[v: 'Watch TV', v:2],
c:[v: 'Sleep', v:7, f:'7.000']
]
);
如果jsonData 不是这种格式，则必须对其进行相应操作
有几种方法可以将列和行添加到DataTable
在下面工作的sn-p中，jsonData 中第一个对象 的键用于创建列
另外，建议不要使用async: false
google.charts.load('current',
callback: function ()
// get json
$.ajax(
url: "momJson.php",
dataType:"json"
).done(function (jsonData)
// success
drawTable(jsonData);
).fail(function (jq, text)
// failure
//console.log(text);
// included here for example purposes
drawTable(["schoolid":"10007","prizeprogram":"APP","datereceived":"20160415","numberstudents":"292","participatingstudents":"69","studentresponse":"0.23","numberbooklets":"91","numbernames":"762","numberorders":"43","orderresponse":"0.05","tov":"1606.52","numbersubscriptions":"64","saleweek":"160122","***":"2.10","vps":"5.50","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Iaeger Elementary School","schoolcity":"Iaeger","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"A","mdrcode":"1\r","schoolid":"10013","prizeprogram":"RSR","datereceived":"20160208","numberstudents":"256","participatingstudents":"58","studentresponse":"0.22","numberbooklets":"78","numbernames":"638","numberorders":"54","orderresponse":"0.08","tov":"2111.23","numbersubscriptions":"80","saleweek":"160108","***":"3.30","vps":"8.24","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Mount Hope Elementary School","schoolcity":"Mount Hope","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10027","prizeprogram":"RBR","datereceived":"20150914","numberstudents":"315","participatingstudents":"49","studentresponse":"0.15","numberbooklets":"57","numbernames":"540","numberorders":"52","orderresponse":"0.09","tov":"1716.61","numbersubscriptions":"73","saleweek":"150904","***":"3.17","vps":"5.44","schoolcat":"7","lowgrade":"PK","highgrade":"8","schooltype":"E","schoolname":"Webster Springs Elementary School","schoolcity":"Webster Springs","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"","mdrcode":"1\r","schoolid":"10051","prizeprogram":"WCR","datereceived":"20150923","numberstudents":"240","participatingstudents":"41","studentresponse":"0.17","numberbooklets":"53","numbernames":"459","numberorders":"56","orderresponse":"0.12","tov":"1745.10","numbersubscriptions":"69","saleweek":"150911","***":"3.80","vps":"7.27","schoolcat":"7","lowgrade":"PK","highgrade":"4","schooltype":"E","schoolname":"Sutton Elementary School","schoolcity":"Sutton","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10052","prizeprogram":"RSR","datereceived":"20160217","numberstudents":"675","participatingstudents":"212","studentresponse":"0.31","numberbooklets":"241","numbernames":"2338","numberorders":"287","orderresponse":"0.12","tov":"10415.68","numbersubscriptions":"407","saleweek":"160129","***":"4.45","vps":"15.43","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Daniels Elementary School","schoolcity":"Daniels","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"5","mdrcode":"1\r","schoolid":"10053","prizeprogram":"RSWB","datereceived":"20160205","numberstudents":"351","participatingstudents":"204","studentresponse":"0.58","numberbooklets":"231","numbernames":"2250","numberorders":"391","orderresponse":"0.17","tov":"14056.06","numbersubscriptions":"545","saleweek":"160115","***":"6.24","vps":"40.04","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Arthur I Boreman Elementary School","schoolcity":"Middlebourne","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10057","prizeprogram":"RSWS","datereceived":"20160302","numberstudents":"265","participatingstudents":"64","studentresponse":"0.24","numberbooklets":"84","numbernames":"707","numberorders":"106","orderresponse":"0.14","tov":"3932.80","numbersubscriptions":"158","saleweek":"160205","***":"5.56","vps":"14.84","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"East*** Elementary School","schoolcity":"Winfield","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r","schoolid":"10065","prizeprogram":"RBR","datereceived":"20150921","numberstudents":"210","participatingstudents":"26","studentresponse":"0.12","numberbooklets":"34","numbernames":"290","numberorders":"42","orderresponse":"0.14","tov":"1539.27","numbersubscriptions":"60","saleweek":"150911","***":"5.30","vps":"7.32","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Salt Rock Elementary School","schoolcity":"Salt Rock","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"","mdrcode":"1\r","schoolid":"10066","prizeprogram":"WCR","datereceived":"20150828","numberstudents":"220","participatingstudents":"67","studentresponse":"0.30","numberbooklets":"94","numbernames":"743","numberorders":"66","orderresponse":"0.08","tov":"2371.85","numbersubscriptions":"96","saleweek":"150814","***":"3.19","vps":"10.78","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Cox Landing Elementary School","schoolcity":"Lesage","schoolstate":"WV","dateupdated":"2016-06-06 11:57:34","testcode":"","mdrcode":"1\r","schoolid":"10095","prizeprogram":"APP","datereceived":"20160223","numberstudents":"300","participatingstudents":"50","studentresponse":"0.16","numberbooklets":"63","numbernames":"552","numberorders":"49","orderresponse":"0.08","tov":"1857.94","numbersubscriptions":"77","saleweek":"160122","***":"3.36","vps":"6.19","schoolcat":"7","lowgrade":"PK","highgrade":"6","schooltype":"E","schoolname":"Beale Elementary School","schoolcity":"Gallipolis Ferry","schoolstate":"WV","dateupdated":"2016-06-06 11:57:32","testcode":"A","mdrcode":"1\r","schoolid":"10104","prizeprogram":"WCR","datereceived":"20150929","numberstudents":"80","participatingstudents":"35","studentresponse":"0.43","numberbooklets":"45","numbernames":"386","numberorders":"48","orderresponse":"0.12","tov":"1708.43","numbersubscriptions":"67","saleweek":"150918","***":"4.42","vps":"21.35","schoolcat":"7","lowgrade":"PK","highgrade":"5","schooltype":"E","schoolname":"Hillsboro Elementary School","schoolcity":"Hillsboro","schoolstate":"WV","dateupdated":"2016-06-06 11:57:34","testcode":"","mdrcode":"1\r","schoolid":"10143","prizeprogram":"WCR","datereceived":"20150915","numberstudents":"400","participatingstudents":"172","studentresponse":"0.43","numberbooklets":"206","numbernames":"1899","numberorders":"193","orderresponse":"0.10","tov":"6286.01","numbersubscriptions":"251","saleweek":"150821","***":"3.31","vps":"15.71","schoolcat":"7","lowgrade":"PK","highgrade":"2","schooltype":"E","schoolname":"Moorefield Elementary School","schoolcity":"Moorefield","schoolstate":"WV","dateupdated":"2016-06-06 11:57:34","testcode":"","mdrcode":"1\r","schoolid":"10159","prizeprogram":"RSR","datereceived":"20160203","numberstudents":"165","participatingstudents":"68","studentresponse":"0.41","numberbooklets":"89","numbernames":"756","numberorders":"48","orderresponse":"0.06","tov":"1588.47","numbersubscriptions":"65","saleweek":"160108","***":"2.10","vps":"9.62","schoolcat":"7","lowgrade":"K","highgrade":"5","schooltype":"E","schoolname":"Prichard Elementary School","schoolcity":"Prichard","schoolstate":"WV","dateupdated":"2016-06-06 11:57:33","testcode":"","mdrcode":"1\r"]);
);
,
packages:['table']
);
function drawTable(jsonData)
var data = new google.visualization.DataTable();
jsonData.forEach(function (row, index)
// load columns
if (index === 0)
Object.keys(row).forEach(function (key)
data.addColumn(
label: key,
type: 'string'
);
);
// load rows
var dataRow = [];
// load value for each column
for (var i = 0; i < data.getNumberOfColumns(); i++)
// ensure each row has value for key
if (row.hasOwnProperty(data.getColumnLabel(i)))
dataRow.push(row[data.getColumnLabel(i)]);
else
dataRow.push(null);
data.addRow(dataRow);
);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, showRowNumber: true, width: '100%', height: '100%');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>编辑
对于自定义列标签，手动加载每个标签，而不是使用数据结果...
function drawTable(jsonData)
var data = new google.visualization.DataTable();
// load columns
// School Id
data.addColumn(
label: 'School Id',
type: 'string'
);
// Prize Program
data.addColumn(
label: 'Prize Program',
type: 'string'
);
// Date Received
data.addColumn(
label: 'Date Received',
type: 'string'
);
// # of Students
data.addColumn(
label: '# of Students',
type: 'string'
);
// # of Participating Students
data.addColumn(
label: '# of Participating Students',
type: 'string'
);
jsonData.forEach(function (row, index)
// load rows
var dataRow = [];
// load value for each column
for (var i = 0; i < data.getNumberOfColumns(); i++)
// ensure each row has value for key
if (row.hasOwnProperty(data.getColumnLabel(i)))
dataRow.push(row[data.getColumnLabel(i)]);
else
dataRow.push(null);
data.addRow(dataRow);
);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, showRowNumber: true, width: '100%', height: '100%');
【讨论】：
所以我需要把我的 json 编码结果放在那里？抱歉，我是个新手，但我不确定我是否完全了解如何将 mysqli 查询转换为谷歌可以读取的 json 数据。我以为我正在这样做，而您的答案很完美，我只是不知道如何在不手动输入的情况下将所有数据库信息添加到 drawTable 函数中。 对不起，我不是故意让你感到困惑，你应该可以从.fail回调中删除这个例子——我把它放在那里是因为从这里运行时ajax调用会失败—— - 但如果您的 json 格式与问题中的一样，并且 ajax 调用不会失败，那么在 .done 回调中对 drawTable 的调用应该会产生相同的结果
我还有一个问题，如果不是太麻烦的话。我非常感谢您为此提供的帮助！是否可以更改上面代码中列标题的标签？现在它工作得很好，但标题需要比数据库更友好
当然，请参阅上述答案的 EDIT，注意 EDIT 中// load columns 的注释和上一个答案 - 上一个答案从结果，EDIT 在循环上方手动添加它们 -- jsonData.forEach -- 希望这会有所帮助......
完美！谢谢！以上是关于来自 php 的 Google Table Chart 创建了 Json的主要内容，如果未能解决你的问题，请参考以下文章
Google Fusion Table to Google Spreadsheet - 按选定标准更新电子表格
javascript 启用对Google Analytics中通常无法跟踪的许多链接和下载的跟踪（来自http://www.blastam.com/blog/index.php/
Google Chrome 中当前 Websocket 协议的 PHP 服务器
PHP:Remplacer une partie d'；une chaÃne par une autre en PHP avec str#u replace（）