我正在尝试使用一个名为Chart.JS的JS库创建一个测试自动化结果仪表板。我想显示一个条形图随着时间的推移，显示通过的测试总数&失败了。
为了做到这一点，我做了以下的事情:
- 创建了一个dash_project .html文件，其中包括Chart.js，在这个文件中，我将实际在画布上绘制图形。
- 创建了一个.php文件，其中我使用PDO连接来查询我机器上的本地数据库副本(现在通过localhost在本地测试)。
- 在同一个.php文件中，我以文本形式将结果显示在浏览器上，以确保我已经捕获了适当的数据。
现在，我对从这里开始的正确流程感到困惑。据我所知，下一步应该是使用JavaScript调用AJAX函数并告诉它要查看哪个PHP文件名(运行MySQL查询的那个)，这将实时返回数据(不刷新屏幕)。在HTML文件中，我应该等待JavaScript返回该信息，最后一步将是实际绘制图形。
jQuery在哪里发挥作用?我能否将AJAX调用放到php文件中这将对数据库进行查询?
我正在考虑通过首先将虚拟数据插入数据库并检查结果是否通过localhost实时显示在我的PHP文件上来测试以确保AJAX调用正在工作。我想下一步是将所有数据从我的$query->fetch()存储到两个不同的数组(一个用于测试通过和一个用于测试失败)，然后以某种方式从我的HTML文件访问该数组调用Chart.JS和粘贴数据到绘制条形图函数?
您不必使用jQuery。这个JavaScript库包含了许多简化AJAX调用和访问DOM的函数，尽管有些人认为浏览器api的融合使得这些函数变得不那么必要了。然而，它仍然很受欢迎。
您的第一个任务可能是在页面加载时触发一个AJAX操作。您可以从直接将此JavaScript添加到页面开始，尽管您可能希望在逻辑工作后将其作为最小化资产添加。
function ajax() {
// @todo Add your ajax logic in here
}
// Load the AJAX data into the chart as soon as the DOM is ready
$(document).on('ready', function() {
ajax();
});
使用返回JSON的get操作执行读操作是很常见的，而getJSON则可以正常工作。在上面的@todo注释中添加这个逻辑。
之后，您可能希望定期刷新数据，例如每60秒刷新一次。您可以这样做:
setInterval(60 * 1000, ajax);
注意间隔计时器以毫秒为单位工作，因此需要乘以1000。
上面的一个缺点是，如果你期望大量的用户，或者希望将间隔减少到一个非常小的值，你的web服务器将处理大量冗余请求(因为大多数调用将不会导致屏幕改变)。因此，在这里使用AJAX的可伸缩性不是很好。
一个更好的方法是配置服务器使用Web Sockets向浏览器推送更新。然而，这需要一个单独的web服务器，所以我可能还不会推荐给你。