使用Google Charts实时更改点图 [英] Real-time changing point chart with Google Charts
问题描述
我对Google图表有疑问.我已经为这个问题苦苦挣扎了两天了，我似乎找不到解决办法.
I have a problem with google charts. I have struggled with this problem for two few days now and I can't seem to find a solution.
我想创建一个监视系统，在该系统中可以看到包含两条线的变化的折线图.我正在用JS代码生成数据(至少现在是这样).
I'm suppose to create a monitoring system where I can see changing line chart that has two lines in it. I'm generating the data in the JS code (at least for now).
我不知道我在做什么错.我可以使用非常简单的静态示例使图表可见，但是一旦我试图向图表中添加一些数据，它就会停止绘制.
I don't know what I'm doing wrong. I can make the chart visible with really simple static example but as soon as I'm trying to add some data to the chart it stops drawing.
此当前版本的错误是:
未捕获的TypeError:无法读取未定义的属性'length'"
"uncaught TypeError: Cannot read property 'length' of undefined"
但这是我第n次尝试使用其他方法向图表添加更多数据的方法，并且这是第n次不同的错误.因此，如果有人知道如何向Google图表添加数据的工作原理，那真是太好了.
but this is nth time I have tried different method of adding more data to the chart and also nth different error. So if someone knows how adding data to google chart works, it would be great to hear.
谢谢.
setInterval(function() {
//this is how I create a random data and call the drawChart function.
var temperature = (Math.random() * (35 - 30) + 30).toFixed(1),
humidity = (Math.random() * (40 - 15) + 15).toFixed(1),
timestamp = new Date();
google.charts.setOnLoadCallback(drawChart(timestamp, temperature, humidity));
}, 5000);
function drawChart(timestamp, temperature, humidity) {
//Cast temperature to proper format for the chart
//This works...don't understand why but it does.
temperature = parseFloat("temperature");
humidity = parseFloat("humidity");
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
if (data[0].length == 0) {
var datetime = new Date();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature');
data.addColumn('number', 'Humidity');
data.addRow(datetime, 0, 0);
var options = {
'title' : 'Temperature and Humidity',
hAxis: {title: 'Time'},
vAxis: {title: 'Temperature and Humidity'},
'width':550,
'height':400
};
}
data.addRow(timestamp, temperature, humidity);
// Instantiate and draw the chart.
var chart = new google.visualization.LineChart(document.getElementById('monitor-chart'));
chart.draw(data, options);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Projekti 1, sivusto</title>
<!-- Latest BOOTSTRAP minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest BOOTSTRAP JC-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- JS Generate new data Class -->
<script type="text/javascript" src="js/generate_data.js"></script>
<!-- GOOGLE CHARTS visualization -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart','line']});
</script>
<!-- My css file -->
<link rel="stylesheet" type="text/css" href="css/ulkoasu.css"/>
</head>
<body>
<article>
<h1>This is Monitor content</h1>
<div id="monitor-data"></div>
<div id="monitor-chart"></div>
</article>
</body>
</html>推荐答案
首先， setOnLoadCallback 的参数应该是对函数的引用，如下所示...
first, the argument for setOnLoadCallback should be a reference to a function, like follows...
google.charts.setOnLoadCallback(drawChart);
不是函数调用的结果 ...
not the result of a function call...
google.charts.setOnLoadCallback(drawChart(timestamp, temperature, humidity));
和 setOnLoadCallback 通常每个页面加载仅使用一次，
首次完成回调后，不再需要此方法
and setOnLoadCallback is typically only used once per page load,
after the callback finishes for the first time, this method is no longer needed
无论如何，都可以将回调添加到 load 语句中
确实不需要 setOnLoadCallback
regardless, the callback can be added to the load statement
setOnLoadCallback isn't really needed
其他错误包括使用 addRow -> data.addRow(时间戳，温度，湿度);
other errors include the use of addRow --> data.addRow(timestamp, temperature, humidity);
列值应在数组中传递...
the column values should be passed in an array...
data.addRow([timestamp, temperature, humidity]);
推荐类似于以下内容的设置-触发回调时，
所有资源(例如图表，选项和数据表)均已创建
recommend setup similar to the following -- when the callback fires,
all the resources, such as the chart, options, and data table are created
drawChart 仅用于添加一行并绘制图表
drawChart is simply used to add one row and draw the chart
请参阅以下工作摘要...
see following working snippet...
google.charts.load('current', {
callback: function () {
var chart = new google.visualization.LineChart(document.getElementById('monitor-chart'));
var options = {'title' : 'Temperature and Humidity',
animation: {
duration: 1000,
easing: 'out',
startup: true
},
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Temperature and Humidity'
},
height: 400
};
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature');
data.addColumn('number', 'Humidity');
var formatDate = new google.visualization.DateFormat({pattern: 'hh:mm:ss'});
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
getTemp();
setInterval(getTemp, 5000);
function getTemp() {
var temperature = (Math.random() * (35 - 30) + 30);
var humidity = (Math.random() * (40 - 15) + 15);
var timestamp = new Date();
drawChart(timestamp, temperature, humidity);
}
function drawChart(timestamp, temperature, humidity) {
data.addRow([timestamp, temperature, humidity]);
formatDate.format(data, 0);
formatNumber.format(data, 1);
formatNumber.format(data, 2);
chart.draw(data, options);
}
},
packages:['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="monitor-chart"></div>这篇关于使用Google Charts实时更改点图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
