javascript - 定期更新Google图表

我目前在网页上显示一个静态的Google图表，并且想知道是否可以定期更新它吗？即每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);

          });
      }

最佳答案

根据您的确切代码的一种简单方法是:

(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的更深入的了解，可以找到一种更好的方法，但是逻辑应该起作用。

关于javascript - 定期更新Google图表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32441649/