谷歌图表，日历实现与AJAX请求

Question

我想在我的网站上实现这个漂亮的日历图表。

https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/calendar

假设客户端在页面加载时执行 ajax 请求，服务器从数据库查询数据并使用 JSON 格式的多维数组进行响应。

如何循环更新地图？

<script>
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 950,
};
chart.draw(dataTable, options);
}
</script>

Answer 1

为了通过 JSON 从数据库中获取真实日期，您需要使用 Google 的数据表 JSON 格式，

可在此处找到 --> DataTable 构造函数的 JavaScript 文字数据参数的格式

和... --使用日期字符串表示形式>日期和时间

这意味着您的 JSON 需要格式化如下...

{
"cols": [
{"label": "Date", "type": "date"},
{"label": "Won/Loss", "type": "number"}
],
"rows": [
{"c":[{"v": "Date(2012, 3, 13)"}, {"v": 37032}]},
{"c":[{"v": "Date(2012, 3, 14)"}, {"v": 38024}]},
{"c":[{"v": "Date(2012, 3, 15)"}, {"v": 38024}]},
{"c":[{"v": "Date(2012, 3, 16)"}, {"v": 38108}]},
{"c":[{"v": "Date(2012, 3, 17)"}, {"v": 38229}]},
{"c":[{"v": "Date(2013, 9, 4)"}, {"v": 38177}]},
{"c":[{"v": "Date(2013, 9, 5)"}, {"v": 38705}]},
{"c":[{"v": "Date(2013, 9, 12)"}, {"v": 38210}]},
{"c":[{"v": "Date(2013, 9, 13)"}, {"v": 38029}]},
{"c":[{"v": "Date(2013, 9, 19)"}, {"v": 38823}]},
{"c":[{"v": "Date(2013, 9, 23)"}, {"v": 38345}]},
{"c":[{"v": "Date(2013, 9, 24)"}, {"v": 38436}]},
{"c":[{"v": "Date(2013, 9, 30)"}, {"v": 38447}]}
]}

否则，您将需要在客户端上传递某种可以转换为日期的字符串......

合并 Ajax 将类似于以下代码片段...

注意：由于该文件无法从此处获得，因此，
将在以下工作片段中调用失败回调...

google.charts.load('current', {
packages: ['calendar']
}).then(function () {
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: 'Red Sox Attendance',
height: 950
};
$.ajax({
url: 'output.txt',
type: 'GET',
dataType: 'json'
}).done(function (data) {
// create data table, draw chart
var dataTable = new google.visualization.DataTable(data);
chart.draw(dataTable, options);
$(window).on('resize', function () {
chart.draw(dataTable, options);
});
}).fail(function (jqXHR, status, errorThrown) {
// remove in production
var dataTable = new google.visualization.DataTable({
"cols": [
{"label": "Date", "type": "date"},
{"label": "Won/Loss", "type": "number"}
],
"rows": [
{"c":[{"v": "Date(2012, 3, 13)"}, {"v": 37032}]},
{"c":[{"v": "Date(2012, 3, 14)"}, {"v": 38024}]},
{"c":[{"v": "Date(2012, 3, 15)"}, {"v": 38024}]},
{"c":[{"v": "Date(2012, 3, 16)"}, {"v": 38108}]},
{"c":[{"v": "Date(2012, 3, 17)"}, {"v": 38229}]},
{"c":[{"v": "Date(2013, 9, 4)"}, {"v": 38177}]},
{"c":[{"v": "Date(2013, 9, 5)"}, {"v": 38705}]},
{"c":[{"v": "Date(2013, 9, 12)"}, {"v": 38210}]},
{"c":[{"v": "Date(2013, 9, 13)"}, {"v": 38029}]},
{"c":[{"v": "Date(2013, 9, 19)"}, {"v": 38823}]},
{"c":[{"v": "Date(2013, 9, 23)"}, {"v": 38345}]},
{"c":[{"v": "Date(2013, 9, 24)"}, {"v": 38436}]},
{"c":[{"v": "Date(2013, 9, 30)"}, {"v": 38447}]}
]
});
chart.draw(dataTable, options);
$(window).on('resize', function () {
chart.draw(dataTable, options);
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>