谷歌圖表中的循環數據

我想創建一個循環，在我的谷歌圖表中，我在圖表中有200點，並且它每秒移動1點到右邊，但是我想在到達時重複圖表所有點。這裏是我的圖表代碼：谷歌圖表中的循環數據

function drawChart5() { 
     var options = { 
    'backgroundColor': 'transparent', 
     width: 1200, 
     height: 240, 
     animation: { 
     duration: 1000, 
     easing: 'in', 
     }, 
     hAxis: {viewWindow: {min:0, max:200}} 
    }; 

    var chart = new google.visualization.AreaChart(
     document.getElementById('visualization')); 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn('number', 'y'); 

    var MAX = 100; 
    var x=0; 
    var f=20; 
    var T= 1/f; 
    var PI = Math.PI; 
    var DT=T/MAX; 
    for (var i = 0; i < 2*MAX; i++) 
    { 
     x=(Math.sin((2*PI)*f*i*DT)); 
     data.addRow([i.toString(), x]); 
     console.log(x) 
    } 

    function drawChart() {  
     google.visualization.events.addListener(chart, 'ready', 
      function() {    
      }); 
     chart.draw(data, options); 
    } 
     setInterval(function() 
     { 
      options.hAxis.viewWindow.min += 1; 
     options.hAxis.viewWindow.max += 1; 

        chart.draw(data,options) 
       },2 000); 

    drawChart(); 
    }

This is the chart

來源

2016-12-03 JorgeLuis009

所以你只是想在最後一點顯示時開始整個過程？ – WhiteHat

是的，我想要創建一個「懦弱」圖表的效果 – JorgeLuis009

我會實現你會爲這樣的效果：

使用數據視圖，而不是一個DataTable，並使用DataView.setColumns()創建運行上面定義的公式的計算列。據我所知，你用來計算你的值的算法是deterministic，所以你需要運行你的計算是x值，你可以確定任何給定位置的y值。

使用此方法，您不必自己填充DataTable，因爲圖表使用您的函數按需計算y值。無論您的圖表顯示的範圍如何，它都會計算繪製圖表時所需的值。

來源

2016-12-03 15:06:19 nbering

對不起，但我不理解你！我如何使用[DataView.setColumns]（https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns）？，使用「calc」或類似的東西來實現這種效果？ – JorgeLuis009

谷歌圖表中的循環數據

回答

相關問題