如何为谷歌折线图提供api计数和日期值？

问题描述

我正在使用 count api 制作一个简单的网络计数器。我很擅长计数。现在，我正在制作一个谷歌折线图，以图形形式显示带有日期的计数值。所以，请帮助我如何在 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);
          }