Javascript 实时滚动谷歌线形图

根据这个问题，我正在尝试实现一个滚动谷歌线形图。图表显示10秒的数据（计算为10*每次数据更新的周期），并在初始化时在DataTable前面加上零值，以填充所需的10秒数据

绘图以20Hz（50ms周期）连续运行，由此删除第一个可见数据点并添加一个新数据点，从而使数据点的总数（data.getNumberOfRows（））保持不变。我即将实现这一功能，但正如下面的提琴所示，我忽略了一些事情。绘制新点并将其连接到较早的点，而不是第二个端点，可见数据点的数量会随着时间的推移而增加

google.load('visualization', '1.0', {
'packages': ['corechart']
});

google.setOnLoadCallback(loadChart);

function loadChart() {

    var options = {
        width: 1000,
        height: 400,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        curveType: 'none',
        pointSize: 5,
        series: {
            0: {
                color: 'Blue'
            }
        }
    };

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Data');

    data.addRows([
        [0, 0]
    ]);

    var interval = 50;
    var dataSize = data.getNumberOfRows();
    var plotSize = (10 * ((1/interval) * 1000));

    if (dataSize < plotSize) {
        for (i = 0; i < (plotSize - dataSize); i++ ) {
            data.addRows([[i, 0]]);
        }
    }

    var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));
    setInterval(drawChart, interval);

    function drawChart() {
        for (i = 1; i < data.getNumberOfRows() - 1; i++) {
            data.setValue(i-1, 1, data.getValue(i, 1));
        }
        data.insertRows(data.getNumberOfRows()-1, [[data.getNumberOfRows()-1, Math.floor(Math.random() * 100) + 1 ]]);
        chart.draw(data, options);
    }
}

google.load（'visualization'，'1.0'{
“包”：[“核心图表”]
});
setOnLoadCallback（loadChart）；
函数负载图（）{
变量选项={
宽度：1000，
身高：400，
言辞：{
最小值：0，
最大值：100
},
曲线类型：“无”，
点数：5，
系列：{
0: {
颜色：“蓝色”
}
}
};
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'X'）；
data.addColumn（'number'，'data'）；
data.addRows([
[0, 0]
]);
var区间=50；
var dataSize=data.getNumberOfRows（）；
变量plotSize=（10*（（1/区间）*1000））；
如果（数据大小<绘图大小）{
对于（i=0；i<（绘图大小-数据大小）；i++）{
data.addRows（[[i，0]]）；
}
}
var chart=new google.visualization.LineChart（document.getElementById（'google\u chart\u div'））；
设置间隔（绘图、间隔）；
函数绘图图（）{
对于（i=1；i

---

我意识到我应该按照以下代码在每次迭代中重置X值，该代码可以根据需要工作

google.load('visualization', '1.0', {
    'packages': ['corechart']
});

google.setOnLoadCallback(loadChart);

function loadChart() {

    var options = {
        width: 1000,
        height: 400,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        curveType: 'none',
        pointSize: 5,
        series: {
            0: {
                color: 'Blue'
            }
        }
    };

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Data');

      data.addRows([
          [0, 0]
      ]);

      var interval = 50;
      var dataSize = data.getNumberOfRows();
      var plotSize = (10 * ((1/interval) * 1000));

      if (dataSize < plotSize) {
          for (i = 0; i < (plotSize - dataSize); i++ ) {
              data.addRows([[i, 0]]);
          }
      }

    var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));
    setInterval(drawChart, interval);

    function drawChart() {
        data.removeRow(0);
        for (i = 0; i < data.getNumberOfRows(); i++) {
            data.setValue(i, 0, i);
        }
        data.insertRows(data.getNumberOfRows(), [[data.getNumberOfRows()-1, Math.floor(Math.random() * 100) + 1 ]]);
        chart.draw(data, options);
    }
}

google.load（'visualization'，'1.0'{
“包”：[“核心图表”]
});
setOnLoadCallback（loadChart）；
函数负载图（）{
变量选项={
宽度：1000，
身高：400，
言辞：{
最小值：0，
最大值：100
},
曲线类型：“无”，
点数：5，
系列：{
0: {
颜色：“蓝色”
}
}
};
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'X'）；
data.addColumn（'number'，'data'）；
data.addRows([
[0, 0]
]);
var区间=50；
var dataSize=data.getNumberOfRows（）；
变量plotSize=（10*（（1/区间）*1000））；
如果（数据大小<绘图大小）{
对于（i=0；i<（绘图大小-数据大小）；i++）{
data.addRows（[[i，0]]）；
}
}
var chart=new google.visualization.LineChart（document.getElementById（'google\u chart\u div'））；
设置间隔（绘图、间隔）；
函数绘图图（）{
数据流（0）；
对于（i=0；i