我有一个crontab作业，它每天对文件进行更新，该文件包含以下内容：
我希望能够在网页上以图形方式显示此信息。看起来Google Charts和json应当可以做到这一点，但是到目前为止，当我尝试这样做时，我只是得到了一个空白页。
我不知道是否有标准的方法（工具或过程）来调试这些工具的问题–如果有，请对我进行电子化:-)。同时，我试图通过将任务分解为更小的组成部分来缩小问题的范围；每个看上去都不错，但是该组合无法正常工作。
这是完全不产生任何内容的html页面：（主要基于https://developers.google.com/chart/interactive/docs/php_example中的示例）
<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':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "/mypath/gtest_usage.json",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from data file.
var data = new google.visualization.DataTable(jsonData);
data.addColumn('date', 'Month');
data.addColumn('number', 'Tests per Month');
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {height: 600});
}
</script>
</head>
<body>
<!--Div that will hold the chart-->
<div id="chart_div"></div>
</body>
</html>
/mypath/gtest_usage.json的内容为：
{
"cols":[
{"type":"datetime"},{"type":"number"}
],
"rows":[
{"c":[{"v":"Date(2015, 3)"},{"v":10}]},
{"c":[{"v":"Date(2015, 5)"},{"v":20}]},
{"c":[{"v":"Date(2015, 8)"},{"v":14}]},
{"c":[{"v":"Date(2016, 3)"},{"v":30}]},
{"c":[{"v":"Date(2016, 5)"},{"v":17}]}
]
}
上面json文件的格式基于，例如，从Perl向JSON图表API发送JSON日期
为了缩小问题范围，我尝试了以下操作：
第1步：不要将单独的文件与json数据一起使用-只需对其进行硬编码即可；这确实绘制了一个图表，这表明基本的html文件等是可以的，并且仅仅是外部数据以某种方式无效或不符合我的html文件的要求：
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', 'Tests per Month');
data.addRows([
[ new Date (2015, 3), 10],
[ new Date (2015, 5), 20],
[ new Date (2015, 8), 14],
[ new Date (2016, 3), 30],
[ new Date (2016, 5), 17]
]);
第2步：使用例如http://jsonlint.com/检查我的json文件语法的有效性-它表示语法很好。
步骤3：更改我如何定义列数据。我看过一些示例，例如，列数据未在html文件中定义，而仅来自json文件。也许我在html中的列定义与json定义不匹配，所以我尝试了：
这些都没有改变-仍然是空白。
步骤4：根据其他用户在StackOverflow和其他地方发布的经验，我检查了json内容中的常见错误，例如，预期类型与提供的数据值不匹配（例如，将其指定为数字，然后在其中提供）引号，以便它是一个字符串）。
我距离这里有一个有效的解决方案还有很长的路要走，或者距离很近-并且由于缺少诊断程序，错误消息等而无法分辨。你们看到我的方法有什么问题吗？您是否知道有任何机制可以帮助像我这样的新手获得实际的错误消息或其他类似的诊断信息，从而可以帮助我了解自己在做错什么？
在此先感谢您提供的任何信息。
json数据看起来有效并且在这里可以正常工作，您可能需要添加列标签...
{"type":"datetime", "label": "Date"},{"type":"number", "label":"Amount"}
使用json创建DataTable时，不需要 data.addColumn
请参阅以下工作片段...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = {
"cols":[
{"type":"datetime"},{"type":"number"}
],
"rows":[
{"c":[{"v":"Date(2015, 3)"},{"v":10}]},
{"c":[{"v":"Date(2015, 5)"},{"v":20}]},
{"c":[{"v":"Date(2015, 8)"},{"v":14}]},
{"c":[{"v":"Date(2016, 3)"},{"v":30}]},
{"c":[{"v":"Date(2016, 5)"},{"v":17}]}
]
};
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {height: 600});
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>编辑
并建议不要使用async: false
并使用success和error处理程序，如下所示...
function drawChart() {
$.ajax({
url: 'getdata.php',
data: '/mypath/gtest_usage.json',
dataType: 'json',
success: function (jsonData) {
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {height: 600});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown + ': ' + textStatus);
}
});
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句