javascript - 定期更新谷歌图表

Question

我目前在我的网页上显示了一个静态的谷歌图表，想知道是否有办法定期更新它？即，每 20 秒加一个点？

我好像找不到这方面的任何信息。请在下面查看我的代码

  function drawAltitudeChart(){

          var graph = [];
          downloadUrl("Map.php", function (data){
              var xml = data.responseXML;
              var markers =     xml.documentElement.getElementsByTagName("marker");
              var dataTable = new google.visualization.DataTable();
              var options = {title:'Altitude (m above sea level)', 
                  curveType:'function', 
                  legend:{position:'bottom'},
                  is3d:true     
              };
              var chart;

              for(var i = 0; i<markers.length; i++){
                  graph[i] = ['', parseInt(markers[i].getAttribute("alt"))];   
              }

              dataTable.addColumn('string', 'id');
              dataTable.addColumn('number', 'Altitude');
              dataTable.addRows(graph);


              chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
              chart.draw(dataTable, options); 

          });
      }

Answer 1

基于您的确切代码的简单方法是:

(function redraw() {
    drawAltitudeChart();
    setTimeout(redraw, 20000);
})();

---

对于更深入和可定制的方法:(尽管我只对 Charts API 有基本的了解。)

function AltitudeChart() {
    this.chart = new google.visualization.LineChart(
        document.getElementById('curve_chart')
    );
}

AltitudeChart.prototype = {
    draw: function() {
        var graph = [];
        downloadUrl('Map.php', function(data) {
            var xml       = data.responseXML;
            var markers   = xml.documentElement.getElementsByTagName("marker");
            var dataTable = new google.visualization.DataTable();
            var options   = {
                title: 'Altitude (m above sea level)', 
                curveType: 'function', 
                legend: { position:'bottom' },
                is3d: true     
            };

            for (var i = 0; i < markers.length; i++) {
                graph[i] = ['', parseInt(markers[i].getAttribute("alt"))];   
            }

            dataTable.addColumn('string', 'id');
            dataTable.addColumn('number', 'Altitude');
            dataTable.addRows(graph);

            this.chart.draw(dataTable, options);
        });
    },

    refreshDraw: function() {
        this.drawTimeout = setTimeout(function() {
            this.draw();
            this.refreshDraw(); // recursive call
        }.bind(this), 20000);   // every 20 seconds
    }
};

new AltitudeChart().refreshDraw();

我敢肯定，如果对 Charts API 有更深入的了解，会有更好的方法来执行此操作，但逻辑应该可行。