【发布时间】：2016-09-04 12:52:42
【问题描述】：
我有一个 crontab 作业，每天更新一个文件，然后包含：
- 日期（年和月，均为数字）
- 当月运行的测试数
我希望能够在网页上以图形方式显示此信息。似乎谷歌图表和 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 文件的格式是基于 e.g. sending JSON dates to google charts API from Perl
我已经尝试过，以缩小问题范围：
第 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 步： 检查我的 json 文件语法的有效性，例如使用http://jsonlint.com/ - 它说语法很好。
第 3 步：改变我定义列数据的方式。我看过一些例子，例如列数据未在 html 文件中定义，仅来自 json 文件。也许我在html中的列定义和json定义不匹配，所以我试过了：
- 删除我的 html 文件中的数据 addColumn 行并仅使用 json 内容
- 去掉json文件中的cols定义，只用 html 文件中的内容。
这些都没有任何区别——仍然是空白。
第 4 步： 根据 StackOverflow 和其他地方发布的其他用户的经验，我检查了 json 内容中的常见错误，例如预期类型与提供的数据值不匹配（例如，将其指定为数字但在引号中提供它以便它是一个字符串）。
我可能距离在这里找到一个有效的解决方案还有很长的路要走，或者非常接近 - 由于缺乏诊断、错误消息等，我无法判断。你们看到我的方法有什么问题吗？您是否知道任何机制等可以帮助像我这样的新手获得实际的错误消息或其他可以帮助我了解我做错了什么的诊断？
提前感谢您对此提供的任何启示。
【问题讨论】：
标签： html json google-visualization