可以通过以下步骤实现:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load
方法加载谷歌图表库,并在加载完成后调用一个回调函数来绘制图表。同时,设置一个计时器来定期更新图表数据。代码示例如下:// 加载谷歌图表库
google.charts.load('current', { 'packages': ['corechart'] });// 在加载完成后调用回调函数
google.charts.setOnLoadCallback(drawChart);
// 绘制图表的回调函数
function drawChart() {
// 创建一个数据表
var data = new google.visualization.DataTable();
data.addColumn('string', '时间');
data.addColumn('number', '数值');
// 创建一个图表
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// 更新图表数据的函数
function updateChart() {
// 发送ajax请求获取最新数据
$.ajax({
url: 'your_data_url',
method: 'GET',
dataType: 'json',
success: function(response) {
// 清空数据表
data.removeRows(0, data.getNumberOfRows());
// 将新数据添加到数据表中
for (var i = 0; i < response.length; i++) {
data.addRow([response[i].time, response[i].value]);
}
// 绘制图表
chart.draw(data, options);
},
error: function(xhr, status, error) {
console.error('Ajax请求失败:', error);
}
});
}
// 设置计时器,每隔一段时间更新图表数据
setInterval(updateChart, 5000); // 每5秒更新一次
}
your_data_url
为你的数据接口URL,确保接口返回的数据格式为JSON数组,每个对象包含time
和value
属性。这样,使用jQuery在计时器上使用ajax更新谷歌图表的功能就实现了。每隔一段时间,ajax请求会获取最新的数据并更新图表展示。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云