动态生成的Javascript图形Google代码

我想知道是否有人能帮我使用这个函数，它来自google代码折线图，我想做的是从下面的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
    }
    });
    }

函数drawVisualization2（）{
var d2=document.getElementById（'distanceField'）。值；
var i；
var arr=新数组（）；
setInterval（function（）{var f1=document.getElementById（'resultField'）.value；}，5000）；
对于（i=0；i<10；i++）{
var f1=document.getElementById（'resultField'）。值；
var d1=parseInt（f1，10）；
setTimeout（函数（）{
//setInterval（函数（）{app.sendConnection（）}，10000）；
//var f1=document.getElementById（'resultField'）。值；
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]
]);
//创建并绘制可视化。
新google.visualization.LineChart（文档
.getElementById（'visualization2'））.draw（数据{
曲线类型：“函数”，
宽度：500，
身高：350，
言辞：{
最大值：d2/2
}
});
}

您发布的代码块有很多问题，包括作用域和同步问题-我没有尝试和拼凑它以使其工作，而是重写了它，并评论了我为什么这样做：

/**
 * 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();
    }

};

---

谢谢，我在这一阶段已经做了一段时间了，你一下子就解决了这个问题，非常棒的工作，谢谢你只是想知道如何让图形变成0,0，而不是像上面那样从一开始就开始？你的意思是用

['0'，'0']

替换

['0'，0]

？（）我的意思是，如图中所示，从原点开始。如果像你的例子一样，它将0沿x轴向下放置，有没有办法从x轴和y轴相交的点开始？@Maria88 oh。看看API，它看起来不像。我能建议的最好方法是用一个空字符串

[''，0]

作为开头。