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，但逻辑应该有效。

Answer 2

每隔x秒添加一个新点......

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

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
dataTable.addColumn('string', 'id');
dataTable.addColumn('number', 'Altitude');

var array = [];
for(var i = 0; i<graph.length; i++) {
    console.log('in loop');
    setTimeout(function(y) {
        array.push(graph[y]);
        dataTable.addRows(a);              
        chart.draw(dataTable, options); 
        array = [];
     }, i*5000, i);
}

定期更新谷歌图表

2 个答案: