Question

我正在尝试使用名为Chart.JS的JS库创建测试自动化结果仪表板。我希望随着时间的推移显示一个条形图，显示通过的测试总数和＆amp;失败。

为此，我做了以下事情：

创建了一个dash_proj.html文件，其中包含Chart.js，在此文件中，我将实际将图形绘制到画布上。
创建了一个.php文件，我在其中使用PDO连接查询我的计算机上的本地数据库副本（现在通过localhost进行本地测试）。
在同一个.php文件中，我在文本中将结果显示在浏览器上，以确保我已抓取相应的数据。

现在，我对这里正确的事物流动感到困惑。根据我的阅读，下一步应该是使用JavaScript来调用AJAX函数并告诉它要查看哪个PHP文件名（运行MySQL查询的那个），这将实时返回数据（没有屏幕）刷新）。在HTML文件中，我应该等待JavaScript返回该信息，最后一步是实际绘制图形。

jQuery在哪里发挥作用？我可以将我的AJAX调用放入我的php文件中，这会使查询到数据库吗？

我正在考虑通过首先将虚拟数据插入数据库并检查结果是否通过localhost实时显示在我的PHP文件上来确保AJAX调用正常工作。我在想下一步是将我的$ query-＆gt; fetch（）中的所有数据存储到两个不同的数组中（一个用于传递测试，一个用于测试失败），然后以某种方式从我的HTML文件访问该数组它调用Chart.JS并将该数据粘贴到绘制条形图函数中？

Answer 1

您不必使用jQuery。这个JavaScript库包含许多函数来简化AJAX调用和访问DOM，尽管some would argue浏览器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套接字将更新推送到浏览器。但是，这需要一种单独的Web服务器，因此我可能不会为您推荐它。

使用AJAX获取图表数据时了解数据流

1 个答案: