如何给api计数和日期值谷歌折线图?



我正在使用count api制作一个简单的web计数器。我很擅长计数。现在,我正在制作一个google折线图,以图表形式显示计数值和日期。所以,请帮助我如何在drawChart()函数中设置日期和计数数据,以根据日期获得计数。这个图应该有5天的计数时间。如何实现这个解决方案。衷心感谢!

const counter = document.getElementById('count');
updateVisitCount();
function updateVisitCount() {
fetch('https://api.countapi.xyz/update/demo/sample/?amount=1').then(res => res.json())
.then(res => {
counter.innerHTML = res.value;
});
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Number of Site Visits'],

]);
var options = {
title: 'Site Visits',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}

可以了

var counters=[
['string', 'value'],
];
setInterval(()=>{
fetch('https://api.countapi.xyz/update/demo/sample/?amount=1').then(res => res.json())
.then(res => {

var dt = new Date();
var secs = dt.getSeconds() 
counters.push(
[secs,res.value]
)
if(counters.length>3){
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart); 
}
});
},1000);

function drawChart() {
var data = new google.visualization.arrayToDataTable(counters);

var options = {
title: 'Site Visits',
curveType: 'function',
legend: { position: 'bottom' }
};


var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

最新更新