Javascript 使用Google图表实时更改点图

我对谷歌图表有问题。我已经为这个问题挣扎了两天，似乎找不到解决办法

我想创建一个监控系统，在这里我可以看到变化的折线图，其中有两条线。我正在JS代码中生成数据（至少现在是这样）

我不知道我做错了什么。我可以使用非常简单的静态示例使图表可见，但只要我尝试向图表添加一些数据，它就会停止绘制

此当前版本的错误是：

“未捕获的TypeError:无法读取未定义的属性'length'”

但这是我第n次尝试向图表中添加更多数据的不同方法，也是第n次尝试不同的错误。 所以，如果有人知道向谷歌图表添加数据是如何工作的，那就很高兴听到这个消息

提前谢谢

setInterval（函数（）{
//这就是我创建随机数据并调用drawChart函数的方法。
变量温度=（数学随机（）*（35-30）+30）.toFixed（1），
湿度=（Math.random（）*（40-15）+15）.toFixed（1），
时间戳=新日期（）；
setOnLoadCallback（drawChart（时间戳、温度、湿度））；
}, 5000);
功能图（时间戳、温度、湿度）{
//将温度转换为图表的正确格式
//这是有效的…我不明白为什么，但它确实有效。
温度=浮动（“温度”）；
湿度=浮动（“湿度”）；
//定义要绘制的图表。
var data=new google.visualization.DataTable（）；
if（数据[0]。长度==0）{
var datetime=新日期（）；
data.addColumn（'datetime'，'Time'）；
data.addColumn（'编号'，'温度'）；
data.addColumn（'编号'，'湿度'）；
data.addRow（日期时间，0,0）；
变量选项={
“标题”：“温度和湿度”，
哈克斯：{title:'Time'}，
vAxis:{title:'温度和湿度'}，
“宽度”：550，
‘高度’：400
};
}
数据。addRow（时间戳、温度、湿度）；
//实例化并绘制图表。
var chart=new google.visualization.LineChart（document.getElementById（'monitor-chart'）；
图表绘制（数据、选项）；
}

西弗斯托项目1
load（'current'，{packages:['corechart'，'line']}）；
这是监视器内容

首先，setOnLoadCallback的参数应该是对函数的引用，如下所示

google.charts.setOnLoadCallback(drawChart);

不是函数调用的结果

google.charts.setOnLoadCallback(drawChart(timestamp, temperature, humidity));

和

setOnLoadCallback

通常只在每次页面加载时使用一次，
回调第一次完成后，不再需要此方法

无论如何，可以将

回调

添加到

load

语句中

setOnLoadCallback

实际上并不需要

---

其他错误包括使用

addRow

-->

data.addRow（时间戳、温度、湿度）

列值应在数组中传递

data.addRow([timestamp, temperature, humidity]);


建议类似于以下内容的设置--当回调启动时，

将创建所有资源，例如图表、选项和数据表

drawChart
仅用于添加一行并绘制图表

请参阅以下工作片段


google.charts.load（'current'{
回调：函数（）{
var chart=new google.visualization.LineChart（document.getElementById（'monitor-chart'）；
var选项={'title'：'Temperature and湿度'，
动画：{
持续时间：1000，
“出去”，
启动：正确
},
哈克斯：{
标题：“时间”
},
言辞：{
标题：“温度和湿度”
},
身高：400
};
var data=new google.visualization.DataTable（）；
data.addColumn（'datetime'，'Time'）；
data.addColumn（'编号'，'温度'）；
data.addColumn（'编号'，'湿度'）；
var formatDate=new google.visualization.DateFormat（{pattern:'hh:mm:ss'}）；
var formatNumber=new google.visualization.NumberFormat（{pattern:'#，##0.0'}）；
getTemp（）；
设置间隔（getTemp，5000）；
函数getTemp（）{
变量温度=（数学随机（）*（35-30）+30）；
变量湿度=（Math.random（）*（40-15）+15）；
var timestamp=新日期（）；
图纸（时间戳、温度、湿度）；
}
功能图（时间戳、温度、湿度）{
data.addRow（[时间戳、温度、湿度]）；
formatDate.format（数据，0）；
formatNumber.格式（数据，1）；
formatNumber.格式（数据，2）；
图表绘制（数据、选项）；
}
},
软件包：['corechart']
});

不，它在同一个文件中。一切都在标签的末尾。这正是我想要做的！非常感谢！我仍然不明白前两行，但我想我必须用谷歌搜索google.charts.load的内容。关于data.AddRow，你说的应该是数组格式。。我在官方文档中读到data.AddRows应该是数组格式的，但是有一个例子，其中data.AddRow是像我在代码中那样编写的。我想这只是文档中的一个错误。获取一个数组
[col1，col2]
--获取一个数组
[[col1，col2]，[col1，col2]]