Javascript 谷歌图表、日历和AJAX请求的实现

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

假设客户端在页面加载时执行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>

load（“当前”{packages:[“日历”]}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'date'，id:'date'}）；
addColumn（{type:'number'，id:'Won/Loss'}）；
dataTable.addRows([
[新日期（2012年3月13日），37032]，
[新日期（2012年3月14日），38024]，
[新日期（2012年3月15日），38024]，
[新日期（2012年3月16日），38108]，
[新日期（2012年3月17日），38229]，
//为简洁起见，省略了许多行。
[新日期（2013年9月4日），38177]，
[新日期（2013年9月5日），38705]，
[新日期（2013年9月12日），38210]，
[新日期（2013年9月13日），38029]，
[新日期（2013年9月19日），38823]，
[新日期（2013年9月23日），38345]，
[新日期（2013年9月24日），38436]，
[新日期（2013年9月30日），38447]
]);
var chart=new google.visualization.Calendar（document.getElementById（'Calendar_basic'）；
变量选项={
标题：“红袜队出席人数”，
身高：950，
};
图表绘制（数据表、选项）；
}

为了通过json从数据库中获取真实日期，
您需要使用google的数据表json格式，
在这里找到-->

和…-->

这意味着您的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'{
套餐：[“日历”]
}).然后（函数（）{
var chart=new google.visualization.Calendar（document.getElementById（'Calendar_basic'）；
变量选项={
标题：“红袜队出席人数”，
身高：950
};
$.ajax({
url:'output.txt'，
键入：“GET”，
数据类型：“json”
}).完成（功能（数据）{
//创建数据表，绘制图表
var dataTable=新的google.visualization.dataTable（数据）；
图表绘制（数据表、选项）；
$（窗口）.on（'resize'，函数（）{
图表绘制（数据表、选项）；
});
}).fail（函数（jqXHR、状态、错误抛出）{
//在生产中去除
var dataTable=新的google.visualization.dataTable({
“科尔斯”：[
{“标签”：“日期”，“类型”：“日期”}，
{“标签”：“赢/输”，“类型”：“编号”}
],
“行”：[
{“c”：[{“v”：“日期（2012年3月13日）”}，{“v”：37032}，
{“c”：[{“v”：“日期（2012年3月14日）”}，{“v”：38024}，
{“c”：[{“v”：“日期（2012年3月15日）”}，{“v”：38024}，
{“c”：[{“v”：“日期（2012年3月16日）”}，{“v”：38108}，
{“c”：[{“v”：“日期（2012年3月17日）”}，{“v”：38229}，
{“c”：[{“v”：“日期（2013年9月4日）”}，{“v”：38177}，
{“c”：[{“v”：“日期（2013年9月5日）”}，{“v”：38705}，
{“c”：[{“v”：“日期（2013年9月12日）”}，{“v”：38210}，
{“c”：[{“v”：“日期（2013年9月13日）”}，{“v”：38029}，
{“c”：[{“v”：“日期（2013年9月19日）”}，{“v”：38823}]}，
{“c”：[{“v”：“日期（2013年9月23日）”}，{“v”：38345}，
{“c”：[{“v”：“日期（2013年9月24日）”}，{“v”：38436}]}，
{“c”：[{“v”：“日期（2013年9月30日）”}，{“v”：38447}
]
});
图表绘制（数据表、选项）；
$（窗口）.on（'resize'，函数（）{
图表绘制（数据表、选项）；
});
});
});
你能详细说明一下。。。。所以，您不想像上面的示例那样添加硬编码数据，而是希望发出ajax请求，并将该数据填入图表？