Javascript Graph Google Code動態生成

Question

我想知道如果有人能夠幫助這個函數，它從谷歌代碼折線圖，我試圖做的是從我的distanceField變量下面添加值，並希望更新圖形每次有新的價值出現時，不確定是否即使採取瞭解決問題的最佳方式，但對問題的任何洞察力都將有所幫助 預先感謝您。

function drawVisualization2() { 
    var d2 = document.getElementById('distanceField').value; 
    var i; 
    var arr = new Array(); 
    setInterval(function() {var f1 =document.getElementById('resultField').value;},5000); 
    for (i = 0; i < 10; i++) { 
    var f1 = document.getElementById('resultField').value; 
    var d1 = parseInt(f1, 10); 
    setTimeout(function() { 
    //setInterval(function() {app.sendConnection()}, 10000);   
    //var f1 = document.getElementById('resultField').value; 
    arr[i] = d1; 
    }, 6000); 
    } 
    var data = google.visualization.arrayToDataTable([ 
    [ 'x', 'title' ], [ '1', arr[0] ], [ '2', arr[1] ], 
    [ '3', arr[2] ], [ '4', arr[3] ], [ '5', arr[4] ], 
    [ '6', arr[5] ], [ '7', arr[6] ], [ '8', arr[7] ], 
    [ '9', arr[8] ], [ '10', arr[9] ], 
    //['N', 1,  0.5,   1] 
    ]); 
    // Create and draw the visualization. 
    new google.visualization.LineChart(document 
    .getElementById('visualization2')).draw(data, { 
    curveType : "function", 
    width : 500, 
    height : 350, 
    vAxis : { 
    maxValue : d2/2 
    } 
    }); 
    } 

Answer 1

有不少東西不對您發佈包括確定範圍和同步問題的代碼塊 - 而不是試圖和雜牌它，使其工作，我已經重寫，並評論說，爲什麼我有這樣做的話吧：

/** 
* A JS class that you can instansiate with the "new" construct 
* on page/api load - this keeps everything self-contained and 
* for the most part, out of the global scope. 
*/ 
function ChartObject(){ 

    // internal function - neater way to grab elements 
    function $(x){ return document.getElementById(x); } 

    // some default data 
    this.data = [['x', 'Metric Title'], ['start',0]]; 

    // read values from our DOM elements and add to our data array 
    this.update = function(){ 
     var dis = $('distanceField').value.trim(), 
      res = parseInt($('resultField').value, 10); 
     if(!isNaN(res) && !!dis){ 
      this.data.push([dis, res]); 
      this.draw(); 
     } else { 
      alert('invalid entry'); 
     } 
    }; 

    // redraw our graph based on our current data array 
    this.draw = function(){ 
     new google.visualization.LineChart($('visualization')).draw(
      google.visualization.arrayToDataTable(this.data), 
      { 
       curveType : "function", 
       width : 450, 
       height : 300 
      } 
     ); 
    } 

    // the following is executed once when the ChartObject is first called 

    // draw the object with initial data 
    this.draw(); 

    // add listener to button that user can click to "update" graph 
    // this could be adapted to work with "onkeyup" rather than trying 
    // to hack with "setTimeout" 
    $('addRecord').onclick = function(){ 
     myChartObject.update(); 
    } 

}; 

jsFiddle: working example