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

Question

我正在使用 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);
}

Answer 1

这行得通。

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);
          }